Для веб-дизайна, который мне недавно дали, мне нужно было решить проблему с центрированным и неизвестным объемом текста в фиксированном круге, и я подумал, что поделюсь здесь решением с другими людьми, изучающими комбинации круг/текст.
Основная проблема, с которой я столкнулся, заключалась в том, что текст часто выходил за пределы круга. Чтобы решить эту проблему, я использовал 4 div. Один прямоугольный контейнер, в котором указаны максимальные (фиксированные) границы круга. Внутри будет div, который рисует круг с шириной и высотой, установленными на 100%, поэтому изменение размера родителя меняет размер фактического круга. Внутри этого будет еще один прямоугольный div, который, используя %, создаст область границы текста, предотвращающую выход текста за круг (по большей части). Затем, наконец, фактический 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 не является моей основной дисциплиной, поэтому я уверен, что ее можно улучшить!
person
David Burford
schedule
05.03.2016