CSS3 круг с переносом текста

Question

Можно ли нарисовать окружность, используя -webkit-border-radius в CSS3, в то же время ограничивая ширину и высоту конкретными переменными (такими как height:100px и width:100px), чтобы при добавлении текста внутри круга текст переносился вместо принудительногоразмер круга поменять?

Answer 1

Если вы хотите справиться с этим только с помощью CSS и сделать его отзывчивым, это , а не возможно способом , который вы хотели бы.

Однако это можно сделать с помощью довольно утомительного JavaScript.

Я предоставляю три варианта.

1. Только CSS, несовершенное решение.

<strong>   _-==-_
 -@@@@@@@@-
- @      @ -
| @      @ |
- @      @ -
 -@@@@@@@@-
   -.__.-
</strong>

Что математически, составляет 14,65% радиуса с каждой стороны (что равно ширине или высоте), предполагая идеальный круг.

Не забывайте, что заполнение внутри элемента зависит от ширины его контейнера, поэтому padding: 14.65% не будет работать , если круг не находится внутри элемента с такой же шириной.

2. JavaScript.

Символы шрифта имеют разные размеры. Для этого вам потребуется:

• моноширинный (или закрытый) шрифт.
• придумать скрипт для расчета ширины на лету.

Сценарий мог бы сделать это, имея элемент inline-block с CSS display: pre;, чтобы вычислить ширину всех точек останова (т.е. слов). При изменении размера браузера вы будете использовать эти значения ширины, чтобы вычислить, сколько вы можете уместить на каждой строке.

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

Это не медленный процесс, но сделать это onresize было бы проблематично, поэтому я бы посоветовал использовать фиксированный размер шрифта и размер круга. так что вам не придется переделывать все это.

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

3. HTML Canvas + JS

Вы могли бы использовать холст вместо этого, согласно решению ниже? Это было бы намного проще. Даже тогда ширина текста вычисляется, но, вероятно, намного быстрее, чем загрузка каждого слова во встроенный блок в DOM.

Обернуть текст в кружок в SVG или Canvas

Answer 2

Можно обернуть текст внутри круга, созданного с использованием радиуса границы CSS3.вам просто нужно добавить величину отступа к радиусу границы

например:

border-radius - это ширина / высота, разделенная на 2. Элемент должен быть идеальным квадратом, чтобы получитьидеальный круг.затем добавьте отступы к радиусу границы

CSS:

.testCircle{
   width:200px; 
   height:200px;
   border-radius:150px;
   background-color:#333;
   padding: 50px;
}

HTML:

<div class="testCircle">
      Text inside a circle
</div>

Это приведет к переносу текста внутри круга,Проверено в FF.Чтобы узнать больше о создании кругов с помощью css3 css circle с текстом, обернутым внутри.

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

Answer 3

Невозможно сделать элемент на самом деле круглым, но вы определенно можете сделать круг заданного размера и поместить текст в самый большой квадрат, который поместится внутри круга, используя padding:
http://jsfiddle.net/pk7yk/2/
(Пример работает только в браузерах WebKit)

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