Как сделать перенос строки в css

Свойство word-wrap

В HTML для разделения строк существует специальный тег . Но его слишком частое использование считается среди разработчиков дурным тоном и зачастую свидетельствует о непрофессионализме. Как доказательство, представьте, что у вас есть логотип и вы хотите, чтобы каждая буква начиналась с новой строки:

Получился громоздкий и уродливый код, от которого у любого разработчика случится культурный шок. И как поступить, если вы захотите, чтобы в десктопной версии логотип располагался горизонтально, а при ширине экрана менее 550 пикселей вертикально? Поэтому для настройки внешнего вида элементов всегда используйте каскадные таблицы стилей. Тем более с помощью инструментов CSS перенос строки осуществляется более элегантным способом. При этом не возникает избыточной разметки, которая только уменьшает скорость загрузки страниц.

Первое свойство, к которому стоит обратиться для обработки текста, — это word-wrap. Принимает три значения: normal, break-all и keep-all. Вам для работы понадобится запомнить только break-all. Normal стоит по умолчанию, и его нет смысла указывать. Keep-all означает в документе CSS запрет переноса строки. Разработано специально для китайских, японских и корейских иероглифов. Поэтому, если вы не собираетесь вести блог на каком-то из этих языков, свойство вам не пригодится. А также оно не поддерживается браузером Safari и мобильными телефонами на базе iOS.

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

Ширина и размер шрифта подбирается таким образом, чтобы места хватало только для одной буквы. Word-wrap со значением break-all сообщает браузеру, что слово нужно каждый раз переносить на новую строку. Незаменимым это свойство назвать нельзя. Но оно пригодится при оформлении небольших блоков с текстом, например полей для ввода комментариев.

Значения свойств

Значение	Описание	Воспроизвести
normal	Последовательность пробелов свернутся в один пробел. Текст будет обернут, когда это необходимо. Это показатель	Воспроизвести »
nowrap	Последовательность пробелов свернутся в один пробел. Текст никогда не будет переноситься на следующую строку. Свойство текст продолжается в той же строке, пока не будет обнаружен тег <br>	Воспроизвести »
pre	Пробелы сохраняются браузером. Текст будет переноситься только на разрывы строк. Действует как в теге <pre> HTML	Воспроизвести »
pre-line	Последовательность пробелов свернутся в один пробел. Текст будет переноситься при необходимости, и на разрывы строк	Воспроизвести »
pre-wrap	Пробелы сохраняются браузером. Текст будет переноситься при необходимости, и на разрывы строк	Воспроизвести »
initial	Устанавливает это свойство в значение индекса. Прочитать о initial	Воспроизвести »
inherit	Наследует это свойство от родительского элемента. Прочитать о inherit

Атрибуты

abbrУстарел в HTML5

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

alignУстарел в HTML5

Указывает выравнивание содержимого ячейки по горизонтали:left — выравнивание содержимого ячейки по левому краюcenter — выравнивание по центруright — выравнивание по правому краюjustify — выравнивание по ширине (одновременно по правому и левому краю)char — выравнивание по указанному символу

axisУстарел в HTML5

Группирует ячейки связанные между собой похожей информацией.

backgroundУстарел в HTML5

Задаёт фоновый рисунок в ячейке.

bgcolorУстарел в HTML5

Назначает цвет фона ячейки.

bordercolorУстарел в HTML5

Устанавливает цвет рамки.

charУстарел в HTML5

Выравнивает содержимое ячейки по заданному символу.
Пример: <td char=»c» align=»char»>…</td>

charoffУстарел в HTML5

Задает смещение содержимого ячейки относительно заданного символа.

colspan

Указывает положительное целое число, определяющее сколько столбцов будет охватывать ячейка (по горизонтали). Значение по умолчанию ‒ 1.

headers

Указывает id одной или нескольких заголовочных ячеек (HTML тег <th>), связанных с данной ячейкой данных. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.

heightУстарел в HTML5

Устанавливает высоту ячейки данных.

nowrapУстарел в HTML5

Запрещает перенос строк.

rowspan

Объединяет вертикальные ячейки.

scopeУстарел в HTML5

Определяет связь ячейки простой таблицы с заголовками в речевых браузерах:col — ячейка заголовка установлена для колонкиcolgroup — ячейка заголовка установлена для группы колонокrow — ячейка заголовка задана для строкиrowgroup — ячейка заголовка установлена для группы строк

valignУстарел в HTML5

Назначает выравнивание содержимого ячейки по вертикали:top — выравнивание содержимого ячейки по верхнему краю строкиmiddle — выравнивание по серединеbottom — выравнивание по нижнему краюbaseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии

widthУстарел в HTML5

Определяет ширину ячейки данных. Используйте вместо него CSS свойство width.

Для этого элемента доступны глобальные атрибуты и события.

Свойства

В конце концов при решении проблем с переносом текста остается некий типичный «список подозреваемых». Одни довольно очевидные и логичные, а другие — нет. Одни делают свое дело сами по себе, а другие не очень.

Итак, давайте взглянем.

Свойство принимает в виде значений два ключевых слова: (по умолчанию) и . Это в дополнение к трём глобальным значениям , и .

По умолчанию слишком длинное слово не разрывается. Браузер не влияет на такое слово, что выглядит замечательно, пока мы не сталкиваемся с мобильными. Хотя размер контейнера может подстраиваться под слово, оно в итоге вывалится из его границ и приведёт к страшной горизонтальной прокрутке на всей странице.

В первом примере этого демо можно наглядно увидеть поведение по умолчанию:

Второй пример на этом демо включает объявление , приказывающее браузеру разбить слово перед возможным переполнением своего контейнера.

Важно заметить: было заменено на , но значения остались прежними. И взгляните. Насколько я поняла, свойство нужно только для того, чтобы как-то по-особому форматировать текст на китайском, японском и корейском языках

Насколько я поняла, свойство нужно только для того, чтобы как-то по-особому форматировать текст на китайском, японском и корейском языках.

Я применяла для разбивки длинных слов, но правильным свойством (если вы не работаете с дальневосточным текстом) будет более общее вышеупомянутое .

hyphens

Свойство hyphens рассказывает браузеру, как расставлять дефис при переносе, и допускает следующие значения: , и , которые в настоящий момент , поэтому вам, видимо, придётся запустить FireFox.

Значение гарантирует, что в слова никогда не будет подставляться символ переноса.

При значении дефис выставляется в месте переноса только при наличии указывающего на это символа. Указать это можно, вставив символ либо жёсткого, либо мягкого переноса в нужное место в разметке.

Жёсткий перенос () прикажет слову разорваться в определённом месте при необходимости, но всё в любом случае будет отображаться на экране.

Мягкий перенос () делает тоже самое, но фактически не отображает дефис на экране, что, как правило, предпочтительнее.

При значении слова можно разбивать либо в явно указанных местах, либо автоматически, в соответствии с правилами расстановки переносов для конкретного языка, указанными в специальных файлах (если они предусмотрены в браузере). Расстановка переносов специфична для языка, и для документа нужно определять атрибут .

white-space

У каждого из нас есть любимые CSS-свойства, на которые можно положиться, словно на запасной выход с надписью «При аварии разбить стекло молотком», чтобы выбраться из запутанной ситуации; см. также и . Для меня таким свойством является .

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

У этого свойства бывает пять значений: (по умолчанию), , , и .

Взглянуть на эти свойства в действии можно в примере ниже: учитывайте добавочные пробельные символы в разметке.

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

(пример 2) также игнорирует дополнительные пробелы, но зато не разбивает строку текста на границах контейнера.

учитывает все пробельные символы в разметке, и не разбивает строки (как видно выше в примере 3).

(пример 4) учитывает добавочные пробелы, но заставляет строку разбиваться.

(последний пятый пример) схлопывает пробельные символы (кроме перевода строки) и принуждает «цепочку» текста умещаться в контейнер.

На CSS—Tricks есть удобная табличка, которая поможет всё это резюмировать.

Как реализовать запрет переноса слов CSS

Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет использовать  CSS перенос слов можно реализовать несколькими способами:

• С помощью неразрывного пробела &nbsp, который устанавливается в местах переноса строки или слов;
• Задав свойству white-space значение «nowrap» (white-space: nowrap).

Пример реализации:

<style type="text/css">
.container{
background-color: rgb(153,255,204);
padding:10px;
width:200px;
}
.content{
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}
.nowrap
{
white-space: nowrap;	
}
</style>
</head>
<body>
<div class="container">
<p>метилпропенилендигидроксициннаменилакрилическая кислота раз</p>
<p class="content" lang="ru">метилпропенилендигидроксициннаменилакрилическая два</p>
<p class="nowrap">метилпропенилендигидроксициннаменилакрилическая кислота три</p>
<p>метилпропенилендигидроксициннаменилакрилическая&nbsp;кислота&nbsp;четыри</p>
</div>
</body>

CSSCSS

Решаем проблему переноса слов с помощью HTML

Перед тем, как рассмотреть CSS перенос слов , изучим возможности решения этой проблемы с помощью языка гипертекста. Для этого в HTML имеется несколько вариантов:

Использование символа мягкого разрыва ­ — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy, а после первой половины выводится знак переноса, похожий на дефис:

<body>
<p>Пример сложного химического соединения и текста - метилпропенилендигидрок&shy;сициннаменилакрилическая кислота</p>
</body>

Использование тега — элемент появился в HTML 5. Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте «разлома» знак переноса, что может негативно сказаться на читаемости всего текста:

<style type="text/css">
wbr { display: inline-block; }
</style>
</head>
<body>
<p>метилпропенилен<wbr>дигидроксицинна<wbr>менилакрилическая кислота</p>
</body>

В некоторых браузерах поддержка тега <wbr> реализована некорректно. В них он будет работать, если для него в коде CSS прописано свойство display со значением inline-block.

Атрибуты¶

Атрибут	Значение	Описание
abbr	text	Определяет сокращенный вариант содержимого ячейки, либо выступает в роли альтернативного текста. В браузере применение атрибута не отображается, но он может быть использован, например, для чтения с экрана или в работе скриптов.
align	left rightcenter	Устанавливает выравнивание содержимого ячейки. Не поддерживается в HTML5.
axis	category_name	Определяет назначение категории ячейки заголовка. Не поддерживается в HTML 5.
background	background	Задает фоновый рисунок в ячейке. Не поддерживается в HTML 5.
bgcolor	rgb(x,x,x) #xxxxxx colorname	Задает цвет фона ячейки таблицы. Не поддерживается в HTML 5.
bordercolor	bordercolor	Задает цвет рамки. Не поддерживается в HTML 5.
char	character	Выравнивает содержимое ячейки данных таблицы по заданному символу. Атрибут char используется только если атрибут align = «char».Не поддерживается в HTML 5.
charoff	number	Атрибут позволяет произвести выравнивание в ячейке данных с указанного в атрибуте символа вправо или влево. Атрибут charoff используется только, если атрибут align = «char». Не поддерживается в HTML 5.
colspan	number	Указывает положительное целое число, определяющее сколько столбцов будет в ячейке по горизонтали. Значение по умолчанию ‒ 1.
headers	header_id	Указывает id одной или нескольких заголовок ячеек, которые определяются HTML тегом <th>. Атрибут не отображается в браузере, но может быть использован для чтения с экрана или в работе скриптов.
height	%pixels	Задает высоту ячейки. Не поддерживается в HTML 5.
nowrap	nowrap	Запрещает перенос строк. Не поддерживается в HTML 5.
rowspan	number	Атрибут определяет количество строк, которые ячейка данных должна охватывать. Значение атрибута должно быть положительным целым числом. Не рекомендуется использовать значения свыше 65534, т.к. они могут быть обрезаны до этого числа. Значение по умолчанию 1.
scope	colcolgrouprowrowgroupauto	Определяет связь ячейки простой таблицы с заголовками в речевых браузерах. Атрибут не отображается в браузере, но может быть использован, например, для чтения с экрана или в работе скриптов.
sorted	reversed number reversed number number reversed	Определяет направление сортировки столбца.Не поддерживается в HTML 5.
valign	top middle bottom baseline	Выравнивает содержимое ячейки заголовка по вертикали. Не поддерживается в HTML 5.
width	%pixels	Задает ширину ячейки данных. Не поддерживается в HTML 5.

Тег <th> поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <th> ?

Цвет текста внутри тега <th>:

• CSS свойство color определяет цвет контента и оформления текста.
• CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <th>:

• CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
• CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
• CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
• CSS свойство word-break указывает перенос строки.

Другие свойства для тега <th>:

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.

white-space | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	4.0+	9.5+	1.0+	3.0+	1.0+	3.5+	1.0+	1.0+

Описание

Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства white-space

Браузеры

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line, pre-wrap и inherit. Для

значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

Opera до версии 9.5 не поддерживает значение pre-line. Для

значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line.

Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap. Для

значения normal, nowrap, и pre воспринимаются как pre-wrap.

CSS white-space Property

CSS property sets how white space inside an element is handled.

Example

HTML Online Editor

<!DOCTYPE html>
<html lang=»en-US»>
<head>
<style>
div{
border: 1px solid black;
padding:10px;
width: 300px;
}
#point{
white-space: normal;
}
#point1{
white-space: nowrap;
}
#point2{
white-space: pre;
}
#point3{
white-space: pre-line;
}
#point3{
white-space: pre-wrap;
}
</style>
</head>
<body>

<h1>CSS white-space Property</h1>

<h2>white-space: normal;</h2>
<div id=»point»>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>

<h2>white-space: nowrap;</h2>
<div id=»point1″>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>

<h2>white-space: pre;</h2>
<div id=»point2″>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>

<h2>white-space: pre-line;</h2>
<div id=»point3″>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>

<h2>white-space: pre-wrap;</h2>
<div id=»point4″>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>

</body>
</html>

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Свойства

В конце концов при решении проблем с переносом текста остается некий типичный «список подозреваемых». Одни довольно очевидные и логичные, а другие — нет. Одни делают свое дело сами по себе, а другие не очень.

Итак, давайте взглянем.

word-wrap / overflow-wrap

По умолчанию слишком длинное слово не разрывается. Браузер не влияет на такое слово, что выглядит замечательно, пока мы не сталкиваемся с мобильными. Хотя размер контейнера может подстраиваться под слово, оно в итоге вывалится из его границ и приведёт к страшной горизонтальной прокрутке на всей странице.

В первом примере этого демо можно наглядно увидеть поведение по умолчанию:

word-break

Насколько я поняла, свойство word-break нужно только для того, чтобы как-то по-особому форматировать текст на китайском, японском и корейском языках.

hyphens

Значение none гарантирует, что в слова никогда не будет подставляться символ переноса.

При значении manual дефис выставляется в месте переноса только при наличии указывающего на это символа. Указать это можно, вставив символ либо жёсткого, либо мягкого переноса в нужное место в разметке.

Мягкий перенос ( ­ ) делает тоже самое, но фактически не отображает дефис на экране, что, как правило, предпочтительнее.

white-space

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

Взглянуть на эти свойства в действии можно в примере ниже: учитывайте добавочные пробельные символы в разметке.

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

nowrap (пример 2) также игнорирует дополнительные пробелы, но зато не разбивает строку текста на границах контейнера.

pre учитывает все пробельные символы в разметке, и не разбивает строки (как видно выше в примере 3).

pre-wrap (пример 4) учитывает добавочные пробелы, но заставляет строку разбиваться.

pre-line (последний пятый пример) схлопывает пробельные символы (кроме перевода строки) и принуждает «цепочку» текста умещаться в контейнер.

Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens) — Примеры

Указанные ниже свойства CSS определяют как переносить длинные слова:

1. только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел и неразрывный дефис ‑ ). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. «Мягкий дефис» ­ проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то или ​ переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
2. после любого символа.
3. согласно правилам русского языка с автоматическим применением дефиса.

В чём состоит различие одно свойства от другого

По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.

Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим word-break: keep-all; .

Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем hyphens: none; .

Если требуется перенос слов, то word-wrap: break-word; советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от word-break: break-all; , которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.

При совместном использовании word-break: break-all; с hyphens: auto; , последнее игнорируется. hyphens: auto; расставляет любые дефисы по своему усмотрению. Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут lang=»ru» .

Не переносить слова на другую строку

Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим «по умолчанию» и добавить white-space: pre; или white-space: nowrap;. Нажмите на white-space: nowrap; и посмотрите на наш полигон.

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	4.0+	9.5+	1.0+	3.0+	1.0+	3.5+	1.0+	1.0+

Краткая информация

Значение по умолчанию	normal
Наследуется	Да
Применяется	К блочным элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/text.html#propdef-white-space

Описание

Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства white-space

Браузеры

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line , pre-wrap и inherit . Для

значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

Opera до версии 9.5 не поддерживает значение pre-line . Для

значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line .

Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap . Для

значения normal , nowrap , и pre воспринимаются как pre-wrap .

Как реализовать запрет переноса слов CSS

Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет использовать  CSS перенос слов можно реализовать несколькими способами:

• С помощью неразрывного пробела &nbsp, который устанавливается в местах переноса строки или слов;
• Задав свойству white-space значение «nowrap» (white-space: nowrap).

Пример реализации:

<style type="text/css">
.container{
background-color: rgb(153,255,204);
padding:10px;
width:200px;
}
.content{
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}
.nowrap
{
white-space: nowrap;	
}
</style>
</head>
<body>
<div class="container">
<p>метилпропенилендигидроксициннаменилакрилическая кислота раз</p>
<p class="content" lang="ru">метилпропенилендигидроксициннаменилакрилическая два</p>
<p class="nowrap">метилпропенилендигидроксициннаменилакрилическая кислота три</p>
<p>метилпропенилендигидроксициннаменилакрилическая&nbsp;кислота&nbsp;четыри</p>
</div>
</body>

Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.

Как запретить перенос текста? | WebReference

HTML самостоятельно переносит текст на другую строку, если текст целиком не помещается в одну строку. В некоторых случаях, наоборот, требуется запретить перенос слов, к примеру, в пунктах меню или в коде программы, чтобы не «ломать» вёрстку. Для этого используется стилевое свойство white-space со значением nowrap, оно добавляется к нужному элементу с текстом.

В примере 1 white-space применяется к ссылкам, чтобы текст ссылки не «разбивался» и не переносился на другую строку.

Пример 1. Использование white-space

Результат данного примера показан на рис. 1.

Рис. 1. Меню с запретом переноса текста

Перенос строк текста в HTML через тег

Итак, первый, самый популярный и в то же время специально созданный тег для переноса строк в тексте – это:

Вы могли также видеть этот тег и без слеша (косой черты) на конце:

Они оба одинаково выполняют свою роль, только первый является правильным (валидным) вариантом согласно спецификации XHTML 1.0 (теги, не имеющие закрывающей части, должны содержать слеш на конце).

Пример использования:

Использовать его вы можете сколько угодно раз. Одно использование – один перенос строки, соответственно, два этих тега, поставленные подряд, дают двойной перенос.

Хочется отметить, что при переносе строки таким способом к ней не добавляется дополнительный отступ, который вы можете увидеть при использовании тега <p> (о нем чуть ниже).

Сам по себе тег <br /> имеет поддержку атрибута «clear», который указывает на то, как обрабатывать следующую строку, если текст обтекает плавающий элемент.

Допустимые значения следующие:

all – отменяет обтекание элемента с обоих (левой и правой) сторон.

left – отменяет обтекание элемента с левой стороны.

right – отменяет обтекание элемента с правой стороны.

none – отменяет действие атрибута.

Пример использования:

Обратите внимание, что если вы хотите сделать большой разрыв между двумя строками – использование тега является не лучшим решением. Суть тега – перенос строки, а не задание отступов. Приемлемое количество подряд используемых тегов (на мой взгляд) – 1–2

Приемлемое количество подряд используемых тегов (на мой взгляд) – 1–2.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Demonstration

The following texts contains contiguous spaces and line feed imposed by inserting the \D code, without markup newline. It has also white spaces placed at the beginning and end of line.

Here is the original code :

It is rendered as following depending on values of the white-space property:

pre (white-space:pre, not the tag):

This demo text
contains contiguous spaces and a carriage return.

normal:

This demo text
contains contiguous spaces and a carriage return.

nowrap:

This demo text
contains contiguous spaces and a carriage return.

pre-wrap:

This demo text
contains contiguous spaces and a carriage return.

pre-line:

This demo text
contains contiguous spaces and a carriage return.

The demos use the following code, with different values for the white-space property:

Compatibility

These values are recognized by all browsers except Internet Explorer version 8 and earlier.

• pre-wrap and pre-line are not supported by Internet Explorer.
• nowrap does not overflow the box with IE.
• No value can keep the spaces at the beginning and end of line in IE.