W przypadku projektowania stron internetowych, które otrzymałem niedawno, musiałem rozwiązać problem z wyśrodkowaną i nieznaną ilością tekstu w stałym okręgu i pomyślałem, że udostępnię to rozwiązanie innym osobom szukającym kombinacji koło / tekst.
Głównym problemem, jaki miałem, było to, że tekst często przekraczał granice koła. Aby rozwiązać ten problem, użyłem 4 elementów div. Jeden prostokątny pojemnik, który określa maksymalne (stałe) granice okręgu. Wewnątrz byłby to element div, który rysuje okrąg z jego szerokością i wysokością ustawioną na 100%, więc zmiana rozmiaru elementu nadrzędnego zmienia rozmiar rzeczywistego koła. Wewnątrz znajdowałby się kolejny prostokątny element div, który, używając% 's, utworzyłby granicę tekstu, zapobiegającą opuszczaniu koła przez jakikolwiek tekst (w większości). Na końcu rzeczywisty element div dla tekstu i wyśrodkowanie w pionie.
Ma to większy sens jako kod:
/* 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>
Możesz odkomentować kolory obramowań elementów div kontenera, aby zobaczyć, jak to ogranicza.
Kwestie, o których należy pamiętać: nadal możesz złamać granice koła, jeśli umieścisz zbyt dużo tekstu lub użyjesz słów / nieprzerwanego tekstu, które są zbyt długie. Nadal nie nadaje się do całkowicie nieznanego tekstu (takiego jak dane wejściowe użytkownika), ale działa najlepiej, gdy wiesz, jaka jest największa ilość tekstu, którą musisz przechowywać, i odpowiednio ustawisz rozmiar koła i rozmiary czcionek. Oczywiście możesz ustawić element div kontenera tekstu tak, aby ukrywał wszelkie przepełnienia, ale może to po prostu wyglądać na „zepsute” i nie zastąpi faktycznego uwzględnienia maksymalnego rozmiaru w projekcie.
Mam nadzieję, że to komuś się przyda! HTML / CSS nie jest moją główną dyscypliną, więc jestem pewien, że można ją ulepszyć!
