Для веб-дизайна, который мне недавно дали, я должен был решить центрированный и неизвестный объем текста в проблеме с фиксированным кругом, и я подумал, что поделюсь здесь решением для других людей, которые ищут комбинации круг / текст.
Основной проблемой, с которой я столкнулся, было то, что текст часто выходил за рамки круга. Чтобы решить эту проблему, я использовал 4 деления. Один прямоугольный контейнер, в котором указаны максимальные (фиксированные) границы круга. Внутри этого будет div, который рисует круг с его шириной и высотой, установленными на 100%, поэтому изменение размера родителя изменяет размер фактического круга. Внутри этого был бы другой прямоугольный div, который, используя% s, создавал бы область границы текста, предотвращая любой текст, покидающий круг (по большей части), и, наконец, фактический div для текста и вертикального центрирования.
Это имеет больше смысла как код:
/* Main Container - this controls the size of the circle */
.circle_container
{
width : 128px;
height : 128px;
margin : 0;
padding : 0;
/* border : 1px solid red; */
}
/* Circle Main draws the actual circle */
.circle_main
{
width : 100%;
height : 100%;
border-radius : 50%;
border : 2px solid black; /* can alter thickness and colour of circle on this line */
margin : 0;
padding : 0;
}
/* Circle Text Container - constrains text area to within the circle */
.circle_text_container
{
/* area constraints */
width : 70%;
height : 70%;
max-width : 70%;
max-height : 70%;
margin : 0;
padding : 0;
/* some position nudging to center the text area */
position : relative;
left : 15%;
top : 15%;
/* preserve 3d prevents blurring sometimes caused by the text centering in the next class */
transform-style : preserve-3d;
/*border : 1px solid green;*/
}
/* Circle Text - the appearance of the text within the circle plus vertical centering */
.circle_text
{
/* change font/size/etc here */
font: 11px "Tahoma", Arial, Serif;
text-align : center;
/* vertical centering technique */
position : relative;
top : 50%;
transform : translateY(-50%);
}
<div class="circle_container">
<div class="circle_main">
<div class="circle_text_container">
<div class = "circle_text">
Here is an example of some text in my circle.
</div>
</div>
</div>
</div>
Вы можете раскомментировать цвета границ в элементах div контейнера, чтобы увидеть, как это ограничивает.
Вещи, о которых следует знать: вы все еще можете выйти за границы круга, если вы поместите слишком много текста или будете использовать слишком длинный текст. Он по-прежнему не подходит для совершенно неизвестного текста (например, пользовательского ввода), но работает лучше всего, когда вы смутно знаете, какое наибольшее количество текста вам нужно сохранить, и соответственно установите размер круга и размеры шрифта. Вы можете установить текстовый контейнер div, чтобы скрыть любое переполнение, конечно, но это может выглядеть просто «сломанным» и не является заменой для фактического учета максимального размера в вашем дизайне.
Надеюсь, это кому-нибудь пригодится! HTML / CSS не моя основная дисциплина, поэтому я уверен, что это можно улучшить!
