Jak wymusić przerwanie linii długim słowem w DIV?

Okej, to mnie naprawdę dezorientuje. Mam trochę treści w div, takie jak:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

Jednak treść przepełnia DIV (zgodnie z oczekiwaniami), ponieważ „słowo” jest za długie.

Jak mogę zmusić przeglądarkę do „złamania” słowa w razie potrzeby, aby zmieściło się w całej zawartości?

Posługiwać się word-wrap:break-word;

Działa nawet w IE6, co jest miłym zaskoczeniem.

word-wrap: break-wordzostał zastąpiony tym, overflow-wrap: break-word;który działa w każdej nowoczesnej przeglądarce. IE, jako martwa przeglądarka, zawsze będzie polegać na przestarzałym i niestandardowym word-wrap.

Istniejące obecnie zastosowania word-wrapnadal działają, ponieważ jest to alias dla overflow-wrapspecyfikacji.

Nie jestem pewien kompatybilności przeglądarki

word-break: break-all;

Możesz także użyć <wbr>znacznika

<wbr>(podział tekstu) oznacza: „Przeglądarka może wstawić tutaj podział wiersza, jeśli chce”. Jeśli przeglądarka nie uważa, że ​​konieczne jest przerwanie linii, nic się nie dzieje.

Można to dodać do zaakceptowanej odpowiedzi w przypadku rozwiązania „dla wielu przeglądarek”.

Źródła:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

Właśnie googlowałem ten sam problem i swoje ostateczne rozwiązanie opublikowałem TUTAJ . Dotyczy to również tego pytania.

Możesz to łatwo zrobić za pomocą div, nadając mu styl word-wrap: break-word(i może być konieczne ustawienie jego szerokości).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

Jednak dla tabel , trzeba także stosować: table-layout: fixed. Oznacza to, że szerokości kolumn nie są już płynne, ale są zdefiniowane na podstawie szerokości kolumn tylko w pierwszym rzędzie (lub poprzez określone szerokości). Przeczytaj więcej tutaj .

Przykładowy kod:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

​jest jednostką HTML dla znaku Unicode zwanego przestrzenią zerowej szerokości (ZWSP), która jest niewidocznym znakiem określającym możliwość łamania linii. Podobnie celem łącznika jest określenie możliwości przełamania linii w granicach słowa.

Stwierdzono, że korzystanie z poniższych działało w większości głównych przeglądarek (Chrome, IE, Safari iOS / OSX) z wyjątkiem Firefoksa (v50.0.2) podczas korzystania z Flexboksa i polegania na nim width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

Uwaga: może być konieczne dodanie prefiksów dostawcy przeglądarki, jeśli nie używasz autoprefiksera.

Inną rzeczą, na którą należy zwrócić uwagę, jest to, że użycie tekstu  do spacji może powodować łamanie wiersza w środku słowa.

CSS word-wrap:break-word; , testowany w FireFox 3.6.3

Rozwiązałem problem z kodem poniżej.

display: table-caption;

Usunąć white-space: nowrap , jeśli istnieje.

Wprowadzić w życie:

white-space: inherit;
word-break: break-word;

Biała spacja jest zachowywana przez przeglądarkę. Tekst będzie zawijany, gdy to konieczne, i przerwy w linii

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

PRÓBNY

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

Z MDN :

Właściwość overflow-wrapCSS określa, czy przeglądarka powinna wstawiać podziały wierszy w słowach, aby zapobiec przepełnieniu tekstu w polu zawartości.

W przeciwieństwie do word-break, overflow-wraputworzy przerwę tylko wtedy, gdy całe słowo nie może zostać umieszczone w swoim wierszu bez przepełnienia.

Możesz więc użyć:

overflow-wrap: break-word;

Czy mogę użyć ?

Najpierw powinieneś określić szerokość swojego elementu. Na przykład:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

tak, że gdy tekst osiągnie szerokość elementu, zostanie podzielony na linie.

Jak wspomniano w odpowiedzi @ davidcondrey, istnieje nie tylko ZWSP, ale także SHY, ­ ­którego można używać w bardzo długich, skonstruowanych słowach (myślenie w języku niemieckim lub holenderskim), które należy rozbić w miejscu, w którym chcesz. Niewidoczny, ale zapewnia łącznik w momencie, gdy jest potrzebny, dzięki czemu słowo jest połączone, a linia wypełniona do końca.

W ten sposób można zauważyć słowo luchthavenpolitieagent , lucht­haven­politie­agentktóre daje dłuższe części niż sylaby tego słowa.
Chociaż nigdy nie czytałem na ten temat niczego oficjalnego, te miękkie myślniki potrafią uzyskać wyższy priorytet w przeglądarkach niż oficjalne myślniki w pojedynczych słowach konstruktu ( jeśli w ogóle mają jakieś rozszerzenie).
W praktyce żadna przeglądarka nie jest w stanie sama złamać tak długiego, skonstruowanego słowa; na mniejszych ekranach, w wyniku czego powstaje nowa linia, aw niektórych przypadkach nawet linia jednego słowa (na przykład, gdy następują dwa z tych skonstruowanych słów).

FYI: holenderski dla funkcjonariusza policji na lotnisku

dzielenie wyrazów: normalne wydaje się być lepsze niż dzielenie wyrazów: dzielenie wyrazów, ponieważ słowo dzielące łamie początkowe, takie jak EN

word-break: normal

Zrób to:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

po prostu spróbuj tego w naszym stylu

white-space: normal;