Para un diseño web que me dieron recientemente, tuve que resolver la cantidad de texto centrada y desconocida en un problema de círculo fijo y pensé que compartiría la solución aquí para otras personas que buscan combinaciones de círculo / texto.
El problema principal que tuve fue que el texto a menudo rompía los límites del círculo. Para resolver esto terminé usando 4 divs. Un contenedor rectangular que especifica los límites máximos (fijos) del círculo. Dentro de eso estaría el div que dibuja el círculo con su ancho y altura establecidos al 100%, por lo que cambiar el tamaño del padre cambia el tamaño del círculo real. Dentro de eso habría otro div rectangular que, utilizando% 's, crearía un área de límite de texto que evitaría que el texto abandone el círculo (en su mayor parte). Finalmente, el div real para el texto y el centrado vertical.
Tiene más 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>
Puede descomentar los colores del borde en los contenedores div para ver cómo se restringe.
Cosas a tener en cuenta: aún puede romper los límites del círculo si coloca demasiado texto o usa palabras / texto ininterrumpido que son demasiado largos. Todavía no es una buena opción para texto completamente desconocido (como la entrada del usuario), pero funciona mejor cuando se sabe vagamente cuál es la mayor cantidad de texto que necesitará almacenar y establecer el tamaño del círculo y los tamaños de fuente en consecuencia. Puede configurar el contenedor de texto div para ocultar cualquier desbordamiento, por supuesto, pero eso puede parecer "roto" y no es un reemplazo para tener en cuenta el tamaño máximo correctamente en su diseño.
¡Espero que sea útil para alguien! HTML / CSS no es mi disciplina principal, así que estoy seguro de que se puede mejorar.
