Para um web design que recebi recentemente, tive que resolver a quantidade de texto centralizada e desconhecida em um problema de círculo fixo e pensei em compartilhar a solução aqui para outras pessoas que pesquisam combos de círculo / texto.
O principal problema que tive foi o texto que muitas vezes quebrou os limites do círculo. Para resolver isso, acabei usando 4 divs. Um contêiner retangular que especificou os limites máximos (fixos) do círculo. Dentro disso, seria a div que desenha o círculo com largura e altura definidas como 100%. Portanto, alterar o tamanho do pai muda o tamanho do círculo real. Dentro disso, haveria outra div retangular que, usando% s, criaria uma área de limite de texto impedindo que qualquer texto saísse do círculo (na maior parte). Finalmente, finalmente, a div real para o texto e a centralização vertical.
Faz mais sentido como código:
/* 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>
Você pode descomentar as cores da borda no divs do contêiner para ver como ele restringe.
Informações importantes: Você ainda pode quebrar os limites do círculo se inserir muito texto ou usar palavras / texto ininterrupto que sejam muito longos. Ainda não é adequado para texto completamente desconhecido (como a entrada do usuário), mas funciona melhor quando você sabe vagamente qual é a maior quantidade de texto que você precisa armazenar e define o tamanho do círculo e o tamanho da fonte de acordo. É possível definir o div do contêiner de texto para ocultar qualquer estouro, é claro, mas isso pode parecer "quebrado" e não substitui a contabilização do tamanho máximo corretamente no seu design.
Espero que isso seja útil para alguém! HTML / CSS não é minha disciplina principal, por isso tenho certeza de que isso pode ser melhorado!
