Czy istnieje sposób na zawijanie długich słów w div?

173

Wiem, że Internet Explorer ma styl zawijania wyrazów, ale chciałbym wiedzieć, czy istnieje metoda między przeglądarkami umożliwiająca wykonanie tego w tekście w elemencie div.

Najlepiej, jeśli CSS, ale fragmenty JavaScript też będą działać.

edycja: Tak, odnosząc się do długich strun, na zdrowie ludzie!

css html word-wrap rutherford
źródło
7
Zawijanie słów odbywa się domyślnie. Czy masz na myśli zawijanie, gdy nie ma oddzielnych słów?
Quentin

Odpowiedzi:

313

Czytając oryginalny komentarz, rutherford szuka sposobu, w jaki można zawijać nieprzerwany tekst w różnych przeglądarkach (co wynika z zastosowania zawijania słów w IE, zaprojektowanego do łamania nieprzerwanych ciągów).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Używam tej klasy od jakiegoś czasu i działa jak urok. (uwaga: testowałem tylko w FireFox i IE)

Aaron Bennett
źródło
Stary post, ale wygląda na to, że spacje nie są renderowane, gdy IE jest w trybie dziwactwa.
Jeremy
2
Używam Firefoksa 24.6.0 i word-wrap: break-wordfaktycznie działało.
user545424
3
Word-wrap: break-wordchociaż stworzony przez Microsoft jest teraz częścią standardu CSS 3 i to właśnie rozwiązuje problem :-)
Pascal_dher
38

Większość poprzedniej odpowiedzi nie działała dla mnie w przeglądarce Firefox 38.0.5. To zrobiło ...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

Dokumentacja:

Paul Zahra
źródło
2
dzięki! to jedyna odpowiedź, która zadziałała (przerwa słów: złamanie wszystkiego; to mi się
udało
12

Rozwiązanie Aarona Benneta działa idealnie dla mnie, ale musiałem usunąć tę linię z jego kodu -> white-space: -pre-wrap;ponieważ dawała błąd, więc ostateczny działający kod jest następujący:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Dziękuję Ci bardzo

Hugo
źródło
1
Aaron Bennett wspomniał o tej samej odpowiedzi 2 lata wcześniej. to, co tu zrobiłeś, nie dodaje wartości.
AaA
6
Cześć, jak widzisz, jeśli ponownie przeczytałeś obie odpowiedzi, mówię tylko, że rozwiązanie Aarona jest w porządku, ale otrzymałem błąd w jednej z linii, które napisał, więc po prostu zmieniłem to na rozwiązanie, które działało mnie. Może powinienem mieć komentarz w jego odpowiedzi, wiem to, przepraszam i dzięki
Hugo
Musiałem dodać tę "białą przestrzeń: -pre-wrap" i zadziałało :)
Ravi Khambhati
0

Jak wspomina Dawid DIV zrobić oblewania słowa domyślnie.

Jeśli odnosisz się do naprawdę długich ciągów tekstu bez spacji, to, co robię, to przetwarzanie ciągu po stronie serwera i wstawianie pustych rozpiętości:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

Nie jest to dokładne, ponieważ występują problemy z rozmiarami czcionek i tym podobne. Opcja zakresu działa, jeśli kontener ma zmienną wielkość. Jeśli jest to kontener o stałej szerokości, możesz po prostu wstawić znaki końca wiersza.

DA.
źródło
@TomHert to naprawdę dziwne. Chociaż, cóż, IE. To nigdy nie działa. To powiedziawszy, zostało to opublikowane 5 lat temu. CSS3 ma teraz lepsze opcje zawijania wierszy, które IE mogą pomieścić developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
DA.
Tak, wiem, po prostu byłem zszokowany prostotą tego rozwiązania, które musiałem wypróbować :)
Tom Hert
0

Możesz spróbować określić szerokość elementu div, niezależnie od tego, czy będzie to piksele, procenty, czy ems. W tym momencie element div pozostanie tą szerokością, a tekst zostanie automatycznie zawinięty w element div.

Slevin
źródło
Spróbuj ustawić szerokość 10 pikseli ... a następnie użyj słowa dłuższego niż 10 pikseli
Paul Zahra