Für ein Webdesign, das mir kürzlich gegeben wurde, musste ich die zentrierte und unbekannte Textmenge in einem Problem mit festen Kreisen lösen, und ich dachte, ich würde die Lösung hier für andere Personen teilen, die sich mit Kreis / Text-Kombinationen befassen.
Das Hauptproblem, das ich hatte, war, dass Text oft die Grenzen des Kreises sprengte. Um dies zu lösen, habe ich 4 Divs verwendet. Ein rechteckiger Container, der die maximalen (festen) Grenzen des Kreises angibt. Darin befindet sich das Div, das den Kreis mit einer Breite und Höhe von 100% zeichnet. Wenn Sie also die Größe des übergeordneten Elements ändern, ändert sich auch die Größe des tatsächlichen Kreises. Darin befindet sich ein weiteres rechteckiges Div, das mit% einen Textgrenzbereich erstellt, der verhindert, dass Text (größtenteils) den Kreis verlässt. Dann schließlich das eigentliche Div für den Text und die vertikale Zentrierung.
Als Code macht es mehr Sinn:
/* 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>
Sie können die Rahmenfarben in den Container-Divs auskommentieren, um zu sehen, wie sie eingeschränkt werden.
Dinge, die Sie beachten sollten: Sie können immer noch die Grenzen des Kreises überschreiten, wenn Sie zu viel Text einfügen oder zu lange Wörter / ungebrochenen Text verwenden. Es passt immer noch nicht zu völlig unbekanntem Text (z. B. Benutzereingaben), funktioniert jedoch am besten, wenn Sie vage wissen, wie viel Text Sie am meisten speichern müssen, und Ihre Kreisgröße und Schriftgröße entsprechend einstellen. Sie können den Textcontainer div so einstellen, dass ein Überlauf natürlich ausgeblendet wird, aber das sieht möglicherweise nur "kaputt" aus und ist kein Ersatz für die tatsächliche Berücksichtigung der maximalen Größe in Ihrem Design.
Hoffe das ist nützlich für jemanden! HTML / CSS ist nicht meine Hauptdisziplin, daher bin ich sicher, dass es verbessert werden kann!
