Как отключить перенос слов в HTML?

Мне кажется глупо, что я не могу понять это, но как отключить wordwrap? свойство css word-wrap может быть принудительно включено с помощью break-word, но не может быть принудительно отключено (только его можно оставить в покое со значением normal).

Как отключить перенос слов?

Ответы

Ответ 1

Вам нужно использовать атрибут CSS white-space.

В частности, white-space: nowrap и white-space: pre являются наиболее часто используемыми значениями. Первым кажется, что вы после.

Ответ 2

Добавленные значения веб-кавычки, отсутствующие выше

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

Ответ 3

Интересно, почему вы нашли в качестве решения "пробел" с помощью "nowrap" или "pre", это не делает правильное поведение: вы заставляете свой текст в одну строку! Текст должен разбивать строки, но не разбивать слова по умолчанию. Это вызвано некоторыми атрибутами CSS: перенос по словам, перенос по переполнению, разрыв слов и дефисы. Так что вы можете иметь:

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

Таким образом, решение состоит в том, чтобы удалить их или переопределить их с помощью "unset" или "normal":

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

ОБНОВЛЕНИЕ: я также предоставил подтверждение с помощью JSfiddle: https://jsfiddle.net/azozp8rr/

Ответ 4

Это помогло мне избежать глупых перерывов в работе Chrome textareas

word-break: keep-all;