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

Ваша проблема связана с использованием различных значений для свойства white-space и word-wrap в разных браузерах. Вот корректные значения, которые могут помочь вам достичь желаемого поведения в различных веб-обозревателях:

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

Обратите внимание, что значения -moz-pre-wrap и -o-pre-wrap специфичны для Firefox и Opera соответственно, в то время как pre-wrap работает в Chrome и других современных браузерах. Значение word-wrap: break-word; используется для Internet Explorer.

Если вы хотите поддерживать максимальное количество браузеров, рекомендуется использовать эти значения для обеспечения совместимости. Не забудьте протестировать ваш CSS в разных браузерах, чтобы убедиться, что текст отображается должным образом.

Если возникнут дополнительные вопросы, не стесняйтесь спрашивать!

Я хотел бы понять, почему вы рассматриваете решение с использованием "white-space" с параметрами "nowrap" или "pre", это не дает корректного поведения: вы принуждаете ваш текст находиться в одной строке! Текст должен переноситься на строки, но не разбиваться на слова по умолчанию. Это происходит из-за некоторых CSS-атрибутов: word-wrap, overflow-wrap, word-break и hyphens. Поэтому вы можете использовать одно из следующих значений:

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;

UPDATE: Я также предоставил доказательство с помощью JSfiddle: https://jsfiddle.net/azozp8rr/

white-space: nowrap;: Этот стиль предотвращает перенос текста, оставаясь в пределах одной строки. Все остальные свойства будут применяться как обычно.

white-space: pre;: Этот стиль также предотвращает перенос текста и сохраняет несколько пробелов подряд как есть. Однако текст будет разбиваться только при наличии явного переноса строки.

Чтобы избежать случайных разрывов текста в текстовых областях Chrome, вы можете использовать следующее CSS-правило:

word-break: keep-all;

Это свойство предотвратит автоматические переносы слов, что может улучшить внешний вид и читаемость текста в текстовых полях. Попробуйте добавить это правило в ваш CSS, и проблема должна исчезнуть.

Вот что сработало для меня: я установил white-space: nowrap на верхнем контейнере. Затем я задал свойству content значение max-content, чтобы граница соответствовала длине содержимого.