Как сделать круг вокруг текста с минимально возможной площадью круга?

Question

Я хочу иметь круг вокруг текста, чтобы текст занимал большую часть области, как по вертикали, так и по горизонтали, но должен быть круг , а не elipse.

Это также означает, что если у меня длинная линия, она будет обертываться внутри круга.

Длина текста неизвестна в расширенном режиме, и если он превышает возможный размер круга, круг должен расти соответственно.

Нечто подобное, но без SVG:

Можно ли, используя только CSS и HTML?

Answer 1

как @Andy Холмс Allready сказал, да IST здесь какой-то Возможное например:

.test { 
 
border-radius: 50%; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
    } 
 

 
p { 
 
    margin-top: 85px; 
 
    }

<div class="test"> 
 
\t <p>Your text</p> 
 
</div>

Answer 2

В зависимости от ваших требований вы можете сделать что-то вроде этого. Обратите внимание, что вам нужно установить ширину и высоту. Я не могу придумать способ сделать это с контентом, который не имеет фиксированной высоты или ширины, так как ему нужны значения для определения радиуса.

.circle { 
 
    height: 300px; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    border-radius: 50%; 
 
    background: rebeccapurple; 
 
} 
 
.circle p { 
 
    width: 300px; 
 
    margin: 0 auto; 
 
    color: white; 
 
}

<div class="circle"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit assumenda sapiente, sunt eveniet quibusdam quas numquam ea libero molestiae nesciunt! Molestias, illum, excepturi. Totam, aliquam. Natus ipsum, earum vero minima!</p> 
 
</div>

Answer 3

Существует нет такого CSS/HTML единственного решения сегодня, где можно сказать, элемент, чтобы его содержание растет как вбок и вниз одинаково, поэтому для того, чтобы работать вам нужно скрипт.

Возможное обходное решение может быть таким, где установлена ​​ширина и фактический круг создается с использованием псевдоэлемента. С этим вам просто нужно отрегулировать ширину с длиной текста, а остальное - автоматически.

div { 
 
    position: relative; 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 100px; 
 
    padding: 30px; 
 
} 
 
div + div { 
 
    width: 140px; 
 
} 
 

 
div::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    border-radius: 50%; 
 
    border: 1px solid gray; 
 
    padding-bottom: 100%; 
 
}

<div>Hi there, this might be an option for you to use, where the text is a sample</div> 
 

 
<div>Hi there, this might be an option for you to use, where the text is a sample. Hi there, this might be an option for you to use, where the text is a sample</div>