Jak wymusić pęknięcie linii długim słowem w Div

Istnieją tabele i pola tworzone za pośrednictwem DIV w dokumentach HTML, które zawierają informacje tekstowe w środku. Problem powstaje, gdy istnieje duże słowo z ogromną liczbą znaków, a z tego powodu tekst wypływa z kontenera, zaniedbywając granicę pojemnika.

Właściwość Word-Wrap CSS, która automatycznie formatuje tekst pisany, rozkładając długie słowo na części w razie potrzeby. „„zawijanie tekstu”Właściwość przenosi części słowa do następnego wiersza zgodnie z rozmiarem pojemnika.

Wymuszanie przerwy w długim słowie w Div

Po prostu dodaj właściwość Word-Wrap z wartością/atrybutem Break Word w elemencie stylu CSS, który odnosi się do Div.

Składnia
Dokładna składnia do dodania właściwości Word-Wrap jest następująca:

Word-Wrap: Break-Word;

Problem: Treść przepełnia div

Omów to z pomocą prostego przykładu div, który ma tekst w środku długim słowem:

ITHOUT Word-Wrap: Break-Word Element

Element przerwania linii w HTML formatuje tekst pisany automatycznie, rozbijając długie słowo z wieloma znakami na części w razie potrzeby. Na przykład, jeśli istnieje veeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrrryyyyyyyyyyy

To wyświetli następujący wynik w wyjściu. Wygląda to bardzo problematycznie, ponieważ tekst przepełnia się z Div:

Rozwiązanie: Dodanie właściwości „Word-Wrap”

Teraz, jeśli weźmiemy ten sam kontener Div z tym samym tekstem w środku, co dodano powyżej w tym poście:

Z władcą słowem: element łamania słowa

Element przerwania linii w HTML formatuje tekst pisany automatycznie, rozbijając długie słowo z wieloma znakami na części w razie potrzeby. Na przykład, jeśli istnieje veeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrrryyyyyyyyyyy

Teraz, w elemencie stylu CSS, należy po prostu odwołać się do klasy DIV, id lub atrybutem, w którym napisano długie problematyczne słowo, a następnie po prostu dodać właściwość Word-Wrap:

.klasa 2
Word-Wrap: Break-Word;

Będzie to wyjście generowane przez powyższy fragment kodu. Teraz wygląda na reprezentację, ponieważ właściwość Word-Wrap podzieliła znaki tekstowe na wiele linii, a nie przepełniła się z pojemnika:

W ten sposób możemy zmusić pęknięcie linii w słowie, które ma wiele postaci.

Wniosek

Aby wymusić pęknięcie linii w długim słowie w div w taki sposób, że przesuwa części słów do następnych wierszy zgodnie z rozmiarem pojemnika, istnieje właściwość Word-Wrap CSS z wściekłem wartość. W elemencie stylu CSS wymagane jest po prostu dodanie selektora do odwołania się do kontenera Div, w którym słowo jest tworzone, a następnie napisać właściwość Word-Wrap.