Как сделать перенос текста по форме круга

Question

Имеется круг с бордер радиусом. Хотелось бы реализовать перенос текста так, что бы он не обрезался) (Имеется ввиду количество отступлений) Пример можете видеть на словах:

concludaturque, Comodo, и в конце - habemus in vim.

Круг создан с помощью border-radius : 50%; Также используется overflow: hidden;
Ответу буду очень благодарен!!!

Answer 1

Свойство shape-outside Вам в помощь. Но, его использование утяжеляет разметку, отнимает прилично времени на подгонку и сильно осложняет масштабирование при резиновой вёрстке.

.circle {
  position: relative;
  height: 300px; width: 300px;
  margin: 20px auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 5px #8e5df8;
  background-image: linear-gradient( to top, #8e5df8 45%, transparent calc(45% + 1px)), url(https://i.stack.imgur.com/VMdUf.png);
  background-position: bottom center, 42% 13%;
  background-repeat: no-repeat;
  background-size: 100%, 133%;
  text-align: justify;
  text-align-last: center;
  text-justify: inter-character;
  letter-spacing: 0.3px;
  color: white;
}

.circle>p:first-of-type {
  position: absolute;
  top: 53%; right: 5%;
  font: 11px sans-serif;
}
.circle>p:nth-of-type(2) {
  position: absolute;
  top: 50%; left: 5%;
  font: bold 20px sans-serif;
  text-shadow: 0 1px 2px black;
}
.circle>p:last-of-type {
  padding-top: 66%;
  font: 9px sans-serif;
  text-shadow: 0 0 2px black;
}

.semi {
  display: block;
  height: 100%; width: 50%;
  shape-margin: 10px;
}
.part_left {
  float: left;
  shape-outside: radial-gradient(300px at right, transparent 50%, black 0%);
}
.part_right {
  float: right;
  shape-outside: radial-gradient(300px at left, transparent 50%, black 0%);
}

<div class="circle">
  <p>&#128077;112&nbsp;&nbsp;&#128078;12&nbsp;&nbsp;16/05/2005</p>
  <p>Great day!</p>
  <span class="semi part_left"></span><span class="semi part_right"></span>
  <p>Имеется круг с бордер радиусом. Хотелось бы реализовать перенос текста так, что бы он не обрезался) (Имеется ввиду количество отступлений) Пример можете видеть на словах:Имеется круг с бордер радиусом. Хотелось бы реализовать перенос текста так, что бы он не обрезался) (Имеется ввиду количество отступлений) Пример можете видеть на словах:</p>
</div>

БЛОГ НА HUSL

Как сделать перенос текста по форме круга

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