- Как реализуется перенос текста CSS?
- Зачем переносить «непереносимое»
- Решаем проблему переноса слов с помощью HTML
- Как реализовать CSS перенос слов
- Как реализовать запрет переноса слов CSS
- white-space
- Try it
- Syntax
- Values
- Collapsing of white space
- Formal definition
- Formal syntax
- Examples
- Basic example
- Line breaks inside elements
- In action
- Specifications
- Browser compatibility
- See also
- white — space
- Кратко
- Пример
- Как пишется
- Как понять
- normal
- Подсказки
- На практике
- Денис Ежков советует
Как реализуется перенос текста CSS?
Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но реализовать перенос текста CSS точно поможет.
Зачем переносить «непереносимое»
В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.
Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:
Решаем проблему переноса слов с помощью HTML
Перед тем, как рассмотреть CSS перенос слов , изучим возможности решения этой проблемы с помощью языка гипертекста.
Для этого в HTML имеется несколько вариантов:
- Использование символа мягкого разрыва — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после ­ , а после первой половины выводится знак переноса, похожий на дефис:
Пример сложного химического соединения и текста - метилпропенилендигидроксициннаменилакрилическая кислота
- Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте « разлома » знак переноса, что может негативно сказаться на читаемости всего текста:
wbrметилпропенилендигидроксициннаменилакрилическая кислота
В некоторых браузерах поддержка тега
Как реализовать CSS перенос слов
Перед тем, как реализовать CSS перенос слов , давайте рассмотрим несколько свойств, способных разрешить основную проблему:
- word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:
Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:
- normal – слова не переносятся;
- break-word – автоматический перенос слов;
- inherit – наследование значения родителя.
Пример, иллюстрирующий применение этого свойства:
.container < background-color: rgb(204,204,204); padding:10px; width:200px; >.contentметилпропенилендигидроксициннаменилакрилическая кислота
В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:
Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать того чтобы реализовать CSS перенос слов .
- word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.
Свойство принимает три значения:
- normal – используются правила переноса, установленные по умолчанию;
- word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
- keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.
.contentСинхрофазотрон
Обеспокоенное состояние
Одиннадцатиклассница
метоксихлордиэтиламинометилбутиламин
hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
- none – отключает CSS перенос слов;
- manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса () ;
- auto – браузер автоматически переносит слова на основе своих настроек.
Для корректной работы свойства в теге или
должен присутствовать атрибут lang со значением «ru» (lang=»ru»).
Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:
.container < background-color: rgb(153,255,204); padding:10px; width:200px; >.contentметилпропенилендигидроксициннаменилакрилическая кислота
Как реализовать запрет переноса слов CSS
Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет использовать CSS перенос слов можно реализовать несколькими способами:
- С помощью неразрывного пробела   , который устанавливается в местах переноса строки или слов;
- Задав свойству white-space значение « nowrap » ( white-space: nowrap ).
.container < background-color: rgb(153,255,204); padding:10px; width:200px; >.content < -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; >.nowrapметилпропенилендигидроксициннаменилакрилическая кислота раз
метилпропенилендигидроксициннаменилакрилическая два
метилпропенилендигидроксициннаменилакрилическая кислота три
метилпропенилендигидроксициннаменилакрилическая кислота четыри
Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.
white-space
The white-space CSS property sets how white space inside an element is handled.
Try it
The property specifies two things:
Note: To make words break within themselves, use overflow-wrap , word-break , or hyphens instead.
Syntax
/* Single keyword values */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; /* white-space-collapse and text-wrap shorthand values */ white-space: collapse balance; white-space: preserve nowrap; /* Global values */ white-space: inherit; white-space: initial; white-space: revert; white-space: revert-layer; white-space: unset;
Values
white-space property values can be specified as a single keyword chosen from the list of values below, or two values representing shorthand for the white-space-collapse and text-wrap properties.
Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
Collapses white space as for normal , but suppresses line breaks (text wrapping) within the source.
Sequences of white space are preserved. Lines are only broken at newline characters in the source and at elements.
Sequences of white space are preserved. Lines are broken at newline characters, at , and as necessary to fill line boxes.
Sequences of white space are collapsed. Lines are broken at newline characters, at , and as necessary to fill line boxes.
The behavior is identical to that of pre-wrap , except that:
- Any sequence of preserved white space always takes up space, including at the end of the line.
- A line-breaking opportunity exists after every preserved white space character, including between white space characters.
- Such preserved spaces take up space and do not hang, thus affecting the box’s intrinsic sizes ( min-content size and max-content size).
The following table summarizes the behavior of the various white-space keyword values:
New lines | Spaces and tabs | Text wrapping | End-of-line spaces | End-of-line other space separators | |
---|---|---|---|---|---|
normal | Collapse | Collapse | Wrap | Remove | Hang |
nowrap | Collapse | Collapse | No wrap | Remove | Hang |
pre | Preserve | Preserve | No wrap | Preserve | No wrap |
pre-wrap | Preserve | Preserve | Wrap | Hang | Hang |
pre-line | Preserve | Collapse | Wrap | Remove | Hang |
break-spaces | Preserve | Preserve | Wrap | Wrap | Wrap |
Note: There is a distinction made between spaces and other space separators. These are defined as follows:
Spaces (U+0020), tabs (U+0009), and segment breaks (such as newlines).
All other space separators defined in Unicode, other than those already defined as spaces.
Where white space is said to hang, this can affect the size of the box when measured for intrinsic sizing.
Collapsing of white space
Formal definition
Formal syntax
white-space =
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
Examples
Basic example
Line breaks inside elements
In action
div id="css-code" class="box"> p < white-space: select> option>normaloption> option>nowrapoption> option>preoption> option>pre-wrapoption> option>pre-lineoption> option>break-spacesoption> option>preserve nowrapoption> select> > div> div id="results" class="box"> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p> div>
.box width: 300px; padding: 16px; > #css-code background-color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; > #css-code select font-family: inherit; > #results background-color: rgb(230, 230, 230); overflow-x: scroll; white-space: normal; font-size: 14px; >
const select = document.querySelector("#css-code select"); const results = document.querySelector("#results p"); select.addEventListener("change", (e) => results.setAttribute("style", `white-space: $e.target.value>`); >);
Specifications
Browser compatibility
BCD tables only load in the browser
See also
white — space
Решаем, будет ли текст переноситься по пробелам или нет.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство white — space указывает браузеру, как обрабатывать пробелы в тексте.
Пример
Скопировать ссылку «Пример» Скопировано
a white-space: nowrap;>
a white-space: nowrap; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
.element white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces;>
.element white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Если текста в элементе много (больше, чем может вместить ширина элемента), то по умолчанию браузер пытается переносить слова на новую строку. Перенос в общем случае выполняется по символам пробела либо по символам переноса строк. Разговор сейчас идёт именно про форматирование текста прямо внутри HTML. Ведь мы можем в HTML длинный абзац оставить одной строкой, а можем разбить на несколько строк, используя клавишу Enter. По умолчанию браузер игнорирует форматирование в HTML. Он ориентируется только на теги, и выводит текст на экран, опираясь на текущий способ обработки пробельных символов. Но мы можем изменить этот способ, используя различные значения свойства white — space .
normal
Скопировать ссылку «normal» Скопировано
Если в строке есть несколько подряд идущих пробелов, то браузер схлопывает их в один пробел. Я из лесу вышел = Я из лесу вышел . Все переносы строк в HTML внутри тега также заменяются на пробел:
Однажды, в студёную зимнюю пору
Я из лесу вышел;
p> Однажды, в студёную зимнюю пору p> p>Я из лесу вышел;p>
Подсказки
Скопировать ссылку «Подсказки» Скопировано
На практике
Скопировать ссылку «На практике» Скопировано
Денис Ежков советует
Скопировать ссылку «Денис Ежков советует» Скопировано
🛠 Довольно часто значение white — space : pre используется при вёрстке исходного кода: