Как разместить текст внутри круга, чтобы он был в пределах круга и не выходил за его границы?
body {
display: flex;
align-items: center;
justify-content: center;
}
:root {
--size: 460px;
--half-size: calc(var(--size) / 2);
}
.text {
flex-shrink: 0;
position: relative;
width: var(--size);
height: var(--size);
padding: 20px;
hyphens: auto;
text-align: center;
font-size: 18px;
line-height: 2;
background: url('https://i.stack.imgur.com/Uk2ai.png') center center no-repeat;
}
.text:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #FFF;
border-radius: 50%;
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.25), inset 0 0 15px 0 rgba(0, 0, 0, 0.25);
}
<div class="text">
<p>Земля – чудесная планета, ее природа разнообразна. Природа нашей планеты – это совокупность каждого элемента: физических естественных и материальных. Природой можно называть только то, что создавалось без непосредственного участия человека.</p>
<p>Природа также представляет собой все физические, биохимические процессы на планете, а также жизнь в целом. Люди также являются частью природы, однако их зачастую рассматривают отдельно.</p>
</div>