Wiem, że program Internet Explorer ma styl zawijania tekstu, ale chciałbym się dowiedzieć, czy istnieje metoda polegająca na stosowaniu tej metody w wielu językach w pliku div.Czy istnieje sposób na zawijanie długich słów w div?
Najlepiej CSS, ale fragmenty kodu JavaScript również działają poprawnie.
edytuj: Tak, odnosząc się do długich łańcuchów, okrzyki ludzi!
Czytając oryginalny komentarz, Rutherford szuka cross-browser sposób zawijania nieprzerwaną tekst (wnioskować o jego wykorzystaniu przenoszenia wyrazów dla IE, mające na celu złamać nieprzerwana smyczki).
/* 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 już od jakiegoś czasu i działa jak czar. (uwaga: przetestowałem tylko w FireFox i IE)
Stary post, ale nie wyświetla spacji, gdy IE jest w trybie dziwactwa. – Jeremy
nie działa ..... –
Używam przeglądarki Firefox 24.6.0, a słowo "zawijam słowo: słowo-przerywane" działa. – user545424
Dawid wspomina, że DIVs do zawijają słowa domyślnie.
Jeśli odnosimy się do bardzo długich ciągów tekstu bez spacji, co mogę zrobić, to przetworzenia tego łańcucha po stronie serwera i wstawić puste rozpiętości:
thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace
to nie jest dokładna, jak istnieją problemy z font-zaklejania i taki. Opcja zakresu działa, jeśli kontener ma zmienny rozmiar. Jeśli jest to kontener o stałej szerokości, możesz po prostu wstawiać znaki końca linii.
nie działa w IE9 i powyżej ... –
@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 tekstu, że IE może pomieścić https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap –
Tak, wiem, byłem po prostu zszokowany prostotą tego rozwiązanie, które musiałem wypróbować :) –
Możesz spróbować określić szerokość elementu div, czy to w pikselach, procentach lub ems, i na tym etapie div pozostanie tą samą szerokością, a tekst zostanie zawinięty automatycznie, a następnie wewnątrz elementu div.
Spróbuj ustawić szerokość 10px ... a następnie użyj słowa dłuższego niż 10px –
Rozwiązanie Aarona Benneta działa idealnie dla mnie, ale musiałem usunąć tę linię ze swojego kodu ->white-space: -pre-wrap; ponieważ to było przyczyną błędu, więc ostateczny kod pracy 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 */
}
bardzo dziękuję
Aaron Bennett wspomniał o tej samej odpowiedzi 2 lata przed tobą. to, co tu zrobiłeś, nie dodaje wartości. – AaA
Witam, jak widać, jeśli ponownie przeczytacie obie odpowiedzi, to co mówię, to tylko to, że rozwiązanie Aarona jest w porządku, ale dostałem błąd w jednym z wierszy, które napisał, więc zmieniłem go na rozwiązanie, które działało dla mnie. Może powinienem mieć komentarz w jego odpowiedzi, wiem to, przepraszam i dziękuję – Hugo
Musiałem dodać to "white-space: -pre-wrap" i zadziałało :) –
Większość z poprzedniej odpowiedzi nie działa na mnie w Firefox 38.0.5. Ten zrobił ...
<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
// Content goes here
</div>
Dokumentacja:
zawijanie dzieje się domyślnie. Czy chodzi ci o zawijanie, gdy * nie ma * oddzielnych słów? – Quentin