tekst wypływający z div

98

Kiedy tekst jest bez spacji i przekracza rozmiar div 200px , wypływa Szerokość jest zdefiniowana jako 200px Umieściłem tutaj mój kod http://jsfiddle.net/madhu131313/UJ6zG/ Możesz zobaczyć poniższe zdjęcia po edycji : Chcę tekst, aby przejść do następnego wiersza

wprowadź opis obrazu tutaj

wprowadź opis obrazu tutaj

madhu131313
źródło

Odpowiedzi:

174

Wynika to z faktu, że masz jedno długie słowo bez spacji. Możesz użyć tej word-wrapwłaściwości, aby spowodować przerwanie tekstu:

#w74 { word-wrap: break-word; }

Ma też dość dobrą obsługę przeglądarki. Zobacz dokumentację na ten temat tutaj .

chipcullen
źródło
3
to nie zadziałało dla mnie tutaj jest inny przykład.
Deepak Vaishnav
to jest super, rozwiązałem jakiś problem na responsywnej stronie
yussan
Cóż za czyste i łatwe rozwiązanie. Dziękuję za udostępnienie.
Dzenis H.
108

Posługiwać się

white-space: pre-line;

Zapobiegnie to wypłynięciu tekstu z div. Spowoduje to przerwanie tekstu, gdy dotrze do końca div.

Nixon
źródło
28

Powinieneś użyć overflow:hidden; lubscroll

http://jsfiddle.net/UJ6zG/1/

lub za pomocą php możesz skrócić długie słowa ...


źródło
Awesome. przepraszam, że chcę, aby przejść do następnej linii, takiej jak czat gmail lub czat na Facebooku :)
madhu131313
Następnie możesz użyć wersji @chipcullen z zawijaniem słów! demo: jsfiddle.net/UJ6zG/3
8

Musisz zastosować następującą właściwość CSS do bloku kontenera (div):

overflow-wrap: break-word;

Zgodnie ze specyfikacją (źródło CSS | MDN ):

Właściwość overflow-wrapCSS określa, czy przeglądarka powinna wstawiać podziały wierszy w słowach, aby tekst nie przepełniał pola zawartości.

Z wartością ustawioną na break-word

Aby zapobiec przepełnieniu, zwykle nierozerwalne słowa mogą być łamane w dowolnych punktach, jeśli nie ma innych akceptowalnych punktów przerwania w linii.

Warty wspomnienia...

Ta właściwość była pierwotnie niestandardowym rozszerzeniem firmy Microsoft o nazwie bez prefiksu word-wrapi została zaimplementowana w większości przeglądarek o tej samej nazwie. Od tego czasu została zmieniona na overflow-wrap, ze word-wrapjest aliasem.


Jeśli zależy Ci na obsłudze starszych przeglądarek, warto określić oba:

word-wrap    : break-word;
overflow-wrap: break-word;

Dawny. IE9 nie rozpoznaje, overflow-wrapale działa dobrze zword-wrap

Paolo
źródło
Dzięki, u mnie zadziałało. Napisałeś "Z wartością ustawioną na przełom" - jestem prawie pewien, że miałeś na myśli "słowo przełomowe" bez "l", mam nadzieję, że nie chciałeś złamać świata;)
Jake Neumann
7

użycie overflow:autogo spowoduje przewijanie tekstu w obrębie div:).

Rahul Razdan
źródło
4

Jeśli to pomoże. Dodaj następującą właściwość z wartością do swojego selektora:

white-space: pre-wrap;
Martin Lloyd Jose
źródło
2

To załatwiło sprawę:

{word-break: break-all; }

Addo
źródło
1
dziękuję bardzo, to była jedyna rzecz, która zadziałała dla mnie (używając styled-components w
Reakcie
0

Niedawno to spotkałem. Użyłem:display:block;

arn-arn
źródło
-6

Jeśli jest to tylko jedna instancja, którą należy zawinąć w 2 lub 3 linie, użyłbym po prostu kilku <wbr>w ciągu. Potraktuje je tak samo, <br>ale nie wstawi końca wiersza, jeśli nie jest to konieczne.

<div id="w74" class="dpinfo">
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads
</div>

Oto skrzypce.

http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/

gaby de wilde
źródło