Разместить текст внутри круга

Question

Как разместить текст внутри круга, чтобы он был в пределах круга и не выходил за его границы?

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>

Answer 1

Вариант без перевода строк с помощью тега <br>

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);
}

.shape {
  display: block;
  width: 50%;
  height: 100%;
}

.shape__left {
  float: left;
  shape-outside: radial-gradient(var(--size) at right, transparent 50%, black 0);
}

.shape__right {
  float: right;
  shape-outside: radial-gradient(var(--size) at left, transparent 50%, black 0);
}

<div class="text">
  <span class="shape shape__left"></span>
  <span class="shape shape__right"></span>
  <p>Земля – чудесная планета, ее природа разнообразна. Природа нашей планеты – это совокупность каждого элемента: физических естественных и материальных. Природой можно называть только то, что создавалось без непосредственного участия человека.</p>
  <p>Природа также представляет собой все физические, биохимические процессы на планете, а также жизнь в целом. Люди также являются частью природы, однако их зачастую рассматривают отдельно.
  </p>
</div>

БЛОГ НА HUSL

Разместить текст внутри круга

Ответы (1 шт):