Jak wyłączyć zawijanie słów w HTML?

517

Czuję się głupio, że nie jestem w stanie tego rozgryźć, ale jak wyłączyć zawijanie słów? css word-wrapnieruchomość może być zmuszony na z break-word, ale nie może być zmuszony off (tylko może być pozostawiona sama z normalwartości).

Jak wymusić zawijania off ?

html css word-wrap

— Alexander Bird
źródło

852

Musisz użyć white-spaceatrybutu CSS .

W szczególności white-space: nowrapi white-space: presą to najczęściej używane wartości. Pierwszy wydaje się być tym, czego szukasz.

— Jon
źródło

25

Dodano brak określonych wartości dla zestawu webkit powyżej

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */

— Matas Vaitkevicius
źródło

3

Zastanawiam się, dlaczego znalazłeś jako rozwiązanie „białą spację” z „nowrap” lub „pre”, to nie robi właściwego zachowania: wymuszasz tekst w jednym wierszu! Tekst powinien przerywać wiersze, ale domyślnie nie łamać słów. Jest to spowodowane niektórymi atrybutami css: zawijaniem wyrazów, zawijaniem przepełnienia, dzieleniem wyrazów i łącznikami. Możesz mieć:

word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Dlatego rozwiązaniem jest ich usunięcie lub zastąpienie ich za pomocą „unset” lub „normal”:

word-break: unset;
word-wrap: unset;
overflow-wrap: unset;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;

AKTUALIZACJA: dostarczam również dowód z JSfiddle: https://jsfiddle.net/azozp8rr/

— zod
źródło

1

Rozumiem, dlaczego ogólnie chcesz łamać słowa. Ale zakładanie, że nie ma żadnego uzasadnionego powodu, by zawijać słowa, nie ma dla mnie sensu. Szybko spróbowałem przetestować twoje „nieuzbrojone” rozwiązanie, ale nadal było zawijanie słów. Jeśli uważasz, że to powinno zadziałać, podaj jsfiddle pokazujący, że działa.

— Alexander Bird

Nie wiem, dlaczego moja odpowiedź zniknęła. Ponownie możesz wymusić nowrap, zwykle ludzie robią to dla przycisków. Ale uważam, że jest to zły projekt z wrażliwych powodów, ponieważ teksty mogą wychodzić poza kontener. W każdym razie pytanie dotyczyło zawijania słów: łamanie słów, zmuszanie do włączenia, a ty pytałeś, jak się wymusić. Podałem więc kod, aby to zrobić. Biała spacja: nowrap to kolejna rzecz, która nie usuwa przełamujących słów, usuwa przełamujące całe linie. Zapewniam również porównanie kodu z JSfiddle: https://jsfiddle.net/azozp8rr/

— zod

2

Pomogło mi to zatrzymać głupie przerwy w pracy w obszarach tekstowych Chrome

word-break: keep-all;

— Ryan Charmley
źródło