Содержание

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

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

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

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Запрет переноса</title> <style> .menu { padding: 0; /* Убираем поля по умолчанию */ background: #34495e; /* Цвет фона */ } .menu li { display: inline-block; /* Пункты меню по горизонтали */ } .menu a { color: #fff; /* Цвет ссылок */ padding: 10px; /* Поля вокруг текста */ text-decoration: none; /* Убираем подчёркивание */ display: block; /* Блочная ссылка */ white-space: nowrap; /* Запрещаем перенос текста */ } .menu a:hover { background: #2c3e50; /* Цвет фона при наведении */ } </style> </head> <body> <ul> <li><a href=»#»>Электроника</a></li> <li><a href=»#»>Компьютеры</a></li> <li><a href=»#»>Бытовая техника</a></li> <li><a href=»#»>Детские товары</a></li> <li><a href=»#»>Зоотовары</a></li> <li><a href=»#»>Дом, дача, ремонт</a></li> <li><a href=»#»>Одежда и обувь</a></li> <li><a href=»#»>Красота и здоровье</a></li> <li><a href=»#»>Спорт и отдых</a></li> <li><a href=»#»>Досуг и развлечения</a></li> </ul> </body> </html>

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

Меню с запретом переноса текста

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 14.11.2018

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты
Всё, что нужно знать об автоматических переносах в CSS / Хабр

Недавно меня пригласили выступить с вечерней лекцией в Типографском обществе Австрии. Для меня стало большой честью последовать по стопам таких светил, как Мэтью Картер, Вим Краувел, Маргарет Калверт, Эрик Шпикерман и покойная Фреда Сэк.

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

Verbesserungsvorschlag означает «предложение для улучшения»), поэтому переносы широко используются в большинстве письменных носителей.

В вебе автоматические переносы появились в 2011 году и теперь широко поддерживаются. Safari, Firefox и Internet Explorer 9 поддерживают их на всех платформах, а Chrome — на Android и MacOS (пока нет на Windows или Linux).


Автоматические переносы запускаются в два шага. Первый — установить язык для текста. Это сообщит браузеру, какой использовать словарь. Для корректных переносов нужен словарь переносов, соответствующий языку текста. Если браузер не знает языка текста, то рекомендации CSS говорят не активировать переносы, даже если они включены в таблице стилей.
Переносы — сложная тема. Точки переноса обычно основаны на слогах, использующих сочетание этимологии и фонологии, но есть и другие правила деления слов.

1. Установка языка


Язык веб-страницы устанавливается с помощью атрибута HTML lang:
<html lang="en">

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

Атрибут lang="en" применяет языковой тег ISO, сообщая браузеру, что текст на английском языке. В этом случае браузер выберет дефолтный английский словарь переносов, что обычно соответствует переносам и в американском английском. Хотя американский и британский английский заметно отличаются в орфографии и произношении (и, следовательно, переносах), но разница не такая существенная, как между вариантами португальского. Проблема решается добавлением «региона», чтобы браузер знал, какой вариант английского наиболее подходит в качестве словаря переносов. Например, чтобы указать бразильский португальский или британский английский:

<html lang="pt-BR">
<html lang="en-GB">

2. Включение переносов


После установки языка можно включить автоматические переносы в CSS. Это исключительно просто:
hyphens: auto;

В настоящее время Safari и IE/Edge требуют префиксов, поэтому прямо сейчас следует написать так:
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;


Но недостаточно просто включить функцию в CSS. В спецификациях CSS Text Module Level 4 появилась возможность управлять переносами, как в программах для вёрстки (например, InDesign) и некоторых текстовых редакторах (включая Word). Эти элементы управления позволяют разными способами установить количество переносов в тексте.

Ограничение длины слова и количества символов до и после переноса


Если переносить короткие слова, их труднее читать. Точно так же вы не хотите отрывать от слова маленький кусочек. Общепринятое эмпирическое правило состоит в том, чтобы переносить только слова длиной не менее шести букв, оставляя не менее трёх символов до переноса и не менее двух на следующей строке.
В Оксфордском руководстве по стилю рекомендуется минимум три буквы после переноса, хотя допустимы редкие исключения.

Эти ограничения задаются с помощью свойства hyphenate-limit-chars. Оно принимает три значения, разделённые пробелами. Это минимальное ограничение символов для всего слова, минимальное количество символов до и после переноса. Чтобы соответствовать вышеупомянуторму эмпирическому правилу, указываем 6, 3 и 2, соответственно:
hyphenate-limit-chars: 6 3 2;


hyphenate-limit-chars в действии

По умолчанию для всех трёх параметров установлено значение auto. Это означает, что браузер выберет лучшие настройки на основе текущего языка и макета. CSS Text Module Level 4 предполагает использование в качестве отправной точки 5 2 2 (на мой взгляд, это приводит к излишним переносам), но браузеры могут изменять параметры на своё усмотрение.

В настоящее время это свойство поддерживает только IE/Edge (с префиксом), а Safari ограничивает количество символов через устаревшее свойство из предыдущего черновика CSS3 Text Module. Это означает, что вы можете добиться одинакового эффекта в Edge и Safari (с перспективным планированием для Firefox) с помощью такого кода:

/* legacy properties */
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 2;

/* current proposal */
-moz-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-webkit-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-ms-hyphenate-limit-chars: 6 3 2;
hyphenate-limit-chars: 6 3 2;

Ограничение числа последовательных переносов


По эстетическим соображениям можно ограничить количество строк подряд с переносами. Последовательные чёрточки дефисов (три или более), уничижительно называются лесенкой. Общее эмпирическое правило для английского языка заключается в том, что две строки подряд —идеальный максимум (хотя в немецком лесенки более длинные). По умолчанию CSS не ограничивает количество последовательных дефисов, но можно установить максимальное их количество в свойстве hyphenate-limit-lines. В настоящее время это поддерживается только IE/Edge и Safari (с префиксами).
-ms-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
hyphenate-limit-lines: 2;


Свойство hyphenate-limit-lines предотвращает лесенку

Можете снять ограничение с помощью no-limit.

Запрет переносов в последней строке абзаца


По умолчанию браузер спокойно переносит самое последнее слово абзаца, так что окончание слова сидит в последней строке, как одинокая сирота. Зачастую предпочтительнее большой пробел в конце предпоследней строки, чем полслова в последней строке. Это устанавливается свойством hyphenate-limit-last со значением always.
hyphenate-limit-last: always;

В настоящее время свойство поддерживается только в IE/Edge (с префиксом).

Уменьшение количества дефисов путём установки зоны переноса


По умолчанию перенос происходит максимально часто, в пределах установленных значений hyphenate-limit-chars и hyphenate-limit-lines. Но даже с этими ограничениями возможно чрезмерное насыщение абзацев дефисами.

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

Для этого нужно указать максимальное допустимое количество пробелов между последним словом строки и краем текстового поля. Если в данном пространстве начинается новое слово, оно не переносится. Это пространство известно как зона переноса. Чем больше зона переноса, тем сильнее неровность и тем меньше переносов. Регулируя зону, вы ищете оптимальное соотношение между количеством дефисов и заполнением строки.


Слева: стрелки указывают строки, где перенос разрешён. Справа: перенос с заданной зоной переноса

Для этого используется свойство hyphenation-limit-zone, где указывается размер в пикселях или процентах (относительно ширины текстового поля). В контексте адаптивного дизайна имеет смысл установить зону переноса в процентах. Это означает, что зона переноса станет меньше на экранах меньшего размера, что вызовет больше переносов и меньше незаполненных строк. И наоборот, на более широких экранах зона переноса расширится, следовательно, будет меньше переносов и больше оборванных строк, которые на широких экранах не так критичны. Основываясь на типичных значениях в программах для вёрстки, можно начать с 8%.

hyphenate-limit-zone: 8%

В настоящее время поддерживается только в IE/Edge (с префиксом).

Всё вместе


С помощью свойств CSS Text Module Level 4 установим для абзаца те же параметры управления переносами, как в обычных программах для вёрстки:
p { hyphens: auto; hyphenate-limit-chars: 6 3 3; hyphenate-limit-lines: 2; hyphenate-limit-last: always; hyphenate-limit-zone: 8%; }

C соответствующими префиксами и откатами код выглядит так:
p {
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-last: always;   
    -webkit-hyphenate-limit-zone: 8%;

    -moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 3 3;
    -moz-hyphenate-limit-lines: 2;  
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;

    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 3 3;
    -ms-hyphenate-limit-lines: 2;
    -ms-hyphenate-limit-last: always;   
    -ms-hyphenate-limit-zone: 8%;

    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;   
    hyphenate-limit-zone: 8%;
}

Перенос — идеальный пример прогрессивного улучшения. Эти свойства можно активировать уже сейчас, если вы считаете, что читатели выиграют от этого. Поддержка браузеров постепенно увеличится. Если вы разрабатываете сайт на языке с длинными словами, как немецкий, читатели точно будут благодарны.
Html запрет переноса строки — Вэб-шпаргалка для интернет предпринимателей!

Как сделать или запретить перенос строки: HTML код и тег

HTML-оформление постов и страниц очень важное дело — оно помогает оформлять контент таким способом, чтобы пользователю было удобно его читать.

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

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

Все о теге для переноса строки br

Тег br осуществляет одинарный перенос строки в HTML (что это такое описано тут) и определяется всеми браузерами. Да, чуть не забыл — если вы используете тег br, то в отличие от тега абзаца p, у вас не добавляется пустой отступ (перед строкой).

Тег br является пустым (пустой значит без содержимого, ничего не содержит), а значит его не нужно закрывать. А так как его не нужно закрывать, было придумано краткое описание — оно изначально подразумевает то, что сам тег не имеет закрывающего тега.

Представьте на минуту, что не было бы краткого описания. Что тогда? Тогда пришлось бы каждый раз «закрывать и открывать» перенос строки примерно так:
. Это как минимум неудобно. Но, тем не менее, в строгом XHTML закрывать его обязательно тегом
.

Если стоит задача увеличить расстояние по вертикали — между теми строками, где вы вставляете перенос — сделайте двойной перенос, вставив тег
дважды подряд.

Чтобы осуществить перенос следующего предложения на новую строку, используем тег br.

Ура, второе предложение на новой строке.

Чтобы осуществить перенос следующего предложения на новую строку, используем тег br.

Ура, второе предложение на новой строке.

Ночь, улица, фонарь, аптека,

Бессмысленный и тусклый свет.

Живи еще хоть четверть века —

Все будет так. Исхода нет.

Умрешь — начнешь опять сначала

И повторится все, как встарь:

Ночь, ледяная рябь канала,

Аптека, улица, фонарь.

Ночь, улица, фонарь, аптека,
Бессмысленный и тусклый свет.
Живи еще хоть четверть века —
Все будет так. Исхода нет.

Умрешь — начнешь опять сначала
И повторится все, как встарь:
Ночь, ледяная рябь канала,
Аптека, улица, фонарь.

Зачем придумали тег br?

Необходимость этого тега существует хотя бы потому что перенести строку «как в Ворде» (как делают неопытные пользователи), путем написания десятков пробелов подряд, — не выйдет.

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

Читайте также: Как сделать пробел в HTML: https://blogwork.ru/probel-v-html/.

Но не стоит злоупотреблять тегом
, чтобы все больше и больше увеличивать расстояние между строками — для этого лучше всего воспользоваться базовыми инструментами HTML+CSS. Недопустимо создание новых абзацев или «как бы абзацев» (это считается плохим подходом) — только перенос строки!

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

Бонус — br clear

А как сделать так чтобы текст, в котором вы поставили перенос строки, не обтекал плавающий элемент (это либо изображение с установленным align, либо элемент со свойством float), а начинался ниже элемента? Для этого можно использовать атрибут clear.

Допустим, у нас есть изображение выровненное по левому краю (align=»left»). Если мы установим
или
, то текст после тега
(следующая строка, которую мы и переносим) будет отображаться как надо, ниже рисунка. Другие значения атрибута clear тега
сделают так, чтобы текст обтекал рисунок, расположившись справа от него.

Использование этого специфичного атрибута не приветствуется спецификацией HTML — такой код будет невалидным.

Кстати, рекомендуем прочесть: Как вставить изображение в HTML.

БОНУС — тег-разделитель hr

Тег тоже одиночный, но, в отличие от
, он используется для создания горизонтального разделителя в виде линии. Более того, внешний вид этой линии мы можем задавать при помощи атрибутов. Но, конечно же, лучше это делать проверенными методами через CSS (что это такое, читайте здесь).

БОНУС — запрет переноса на новую строку с тегом nobr

Бывает и так, что мы хотим запретит перенос строки и избежать перевода на новую строку текста: либо между двумя конкретными словами, либо в целом абзаце. Что делать? Использовать тег . Как выглядит на практике? Вот так:

Что делает тег ? Он говорит браузеру — отображай текст внутри тега без переносов, одной строкой. И, если текст длинный, тогда у нас появится некрасивая и длинная горизонтальная полоса прокрутки, а пользователи должны будут прокрутить текст по горизонтали, чтобы прочитать его полностью.

Как мы понимаем, это очень неудобно. Но тег есть!

Итоги — использование br, nobr, hr, p в HTML

Подводя итог, резюмирую содержание статьи:

— для того чтобы разделять абзацы

  • тег
    — для того чтобы перенести строку внутри абзаца (недопустимо «создание абзацев» при помощи этого тега или злоупотребление им)
  • тег — для создания горизонтальной линии-разделителя
  • тег — для запрета переноса строк в HTML
  • Как запретить перенос текста? | WebReference

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

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

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

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

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

    Автор и редакторы

    Автор: Влад Мержевич

    Последнее изменение: 14.11.2018

    Редакторы: Влад Мержевич

    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+
    Краткая информация
    Версии CSS
    CSS 1 CSS 2 CSS 2.1 CSS 3
    Описание

    Свойство 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.

    html — Запретить переносы строк

    Stack Overflow на русском

    Начните с этой страницы, чтобы быстро ознакомиться с сайтом

    Подробные ответы на любые возможные вопросы

    Обсудить принципы работы и политику сайта

    Узнать больше о компании Stack Overflow

    Узнать больше о поиске разработчиков или рекламе на сайте

    текущее сообщество

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

    Приветствую вас, дорогие друзья!

    Сегодня я предлагаю вам разобраться, как можно запретить перенос слов CSS-свойствами.

    Дело в том, что по умолчанию в HTML для текста в блоках переносы для слов не заданы, и при уменьшении размеров блока, слова переносятся на новую строку. Но в случае создания сайта на базе CMS, например, WordPress, вы можете столкнуться с тем, что, при адаптации сайта для мобильных устройств, слова будут переноситься посимвольно.

    Делается это, в первую очередь для экономии места, и наилучшего заполнения текстом блока. Но далеко не всегда это удобно и красиво.

    Давайте рассмотрим свойство, которое позволит вам запретить перенос слов CSS при возникновении такой необходимости.

    В случае если у вас при изменении размера блока происходит перестроения текста с переносом отдельных символов на следующую строку, то, скорее всего, в активной теме вашего сайта для всех div применяется CSS-свойство word-break со значением break-all:

    Перенос слов по символьно на новую строку

    Данное свойство задает автоматическую расстановку переносов для наилучшего заполнения блока.

    Если вам нужно его отключить, то в CSS-файле активной темы, для блока, в котором расположен текст, вам нужно задать это же свойство, но со значением normal:

    Запрет переноса слов CSS-свойствами

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

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

    Для правильного определения селектора блока, для которого вы собираетесь добавить стили, вы можете воспользоваться рекомендациями из этой статьи: «Как определить ID и класс элемента на странице?»

    Для более безопасного и удобного добавления стилей для вашего сайта, рекомендую использовать программу NotePad++. Инструкцию по ее настройке и использованию вы сможете найти по этой ссылке: «Редактирование файлов сайта в Notepad++»

    Сегодня у меня все. Надеюсь, показанный в данной статье прием работы поможет вам при создании вашего сайта и адаптации его под мобильные устройства, и у вас не возникнет проблем при необходимости запретить перенос слов CSS.

    Если вам понравилась данная статья, обязательно, оставьте свой комментарий и поделитесь ею в социальных сетях.

    До встречи в следующих статьях!

    С уважением Юлия Гусарь

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

    Сегодня мы с вами немного коснемся темы оформления текстов на вашем сайте. Создавая сайт и ведя уже существующий, нужно грамотно подходить к каждой его мелочи. Я – активный пользователь Интернета, очень часто ищу различную информацию абсолютно по разным темам. Зачастую встречаю сайты, на которых информация представлена примерно в таком виде:

    Не говоря уже о том, что здесь нет никаких выделений (главного в тексте), так и отсутствуют какие-либо параграфы, или попросту – переносы строк. Текст может быть и корректным с точки зрения орфографии и его темы, но визуально – он некомфортен для восприятия. Согласитесь, такой вид куда более читабельный и не «отпугивает» наших пользователей:

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

    Для наглядности за основу мы возьмем популярный в кругах дизайнеров и верстальщиков текст «Lorem Ipsum», а если быть точнее – то несколько его параграфов:

    и рассмотрим популярные способы переноса строк в HTML.

    Первый вариант переноса строк в HTML

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

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

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

    Второй вариант переноса строк в HTML

    В HTML существует такое понятие, как параграфы. Для них отведен специальный тег типа:

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

    Здесь стоит отметить то, что использование пустого тега типа:

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

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

    Этот вариант оформления текстов я люблю больше всего, так как можно настроить желаемое расстояние между параграфами. Тег из первого же варианта я использую редко.

    Третий вариант переноса строк в HTML

    Этот вариант похож на вид параграфов, только вместо тега «p» используется тег «div»:

    Принцип работы тот же самый – каждый блок текста, обернутого в эту конструкцию, начинается с новой строки. Пустой тег не дает дополнительной новой строки. Что касается отступов, в отличие от параграфов, то здесь они отсутствуют. Но вы можете настроить их и сами, через глобальные стили:

    или же через отдельный идентификатор блока:

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

    Перенос слов 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; и посмотрите на наш полигон.

    У меня в CSS есть стиль, которым я покрываю нужное мне словосочетание (2 слова обычно). Хочу, чтобы эти два слова не разделялись переносом строки.

    Допустим после слова «два» у меня должен идти перенос строки (потому что она заканчивается), но я хочу чтобы в таком случае перенос состоялся ДО слова «два», то есть перенеслось сразу словосочетание «два слова».

    Глобально по документу прописан word-wrap: break-word;

    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

    Версии CSS

    CSS 1 CSS 2 CSS 2.1 CSS 3

    Описание

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

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

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

    Объектная модель

    [window.]document.getElementBy >elementID «).style.whiteSpace

    Браузеры

    Браузер 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 .

    Рекомендуем к прочтению

    Html запретить перенос слов — Вэб-шпаргалка для интернет предпринимателей!

    Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но с переносом слов CSS точно поможет:

    Зачем переносить «непереносимое»

    В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.

    Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:

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

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

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

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

    Перенос слов средствами CSS

    Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

    1. word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:


    Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:

    • normal – слова не переносятся;
    • break-word – автоматический перенос слов;
    • inherit – наследование значения родителя.

    Пример, иллюстрирующий применение этого свойства:


    В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:


    Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .

    1. word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.

    Свойство принимает три значения:

    • normal – используются правила переноса, установленные по умолчанию;
    • word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
    • keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.

    1. hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
    • none – отключает перенос слов в CSS ;
    • manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса (­) ;
    • auto – браузер автоматически переносит слова на основе своих настроек.

    должен присутствовать атрибут lang со значением «ru» (lang=»ru»).

    Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:

    Запрет переноса слов

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

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


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

    Как сделать или запретить перенос строки: HTML код и тег

    HTML-оформление постов и страниц очень важное дело — оно помогает оформлять контент таким способом, чтобы пользователю было удобно его читать.

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

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

    Все о теге для переноса строки br

    Тег br осуществляет одинарный перенос строки в HTML (что это такое описано тут) и определяется всеми браузерами. Да, чуть не забыл — если вы используете тег br, то в отличие от тега абзаца p, у вас не добавляется пустой отступ (перед строкой).

    Тег br является пустым (пустой значит без содержимого, ничего не содержит), а значит его не нужно закрывать. А так как его не нужно закрывать, было придумано краткое описание — оно изначально подразумевает то, что сам тег не имеет закрывающего тега.

    Представьте на минуту, что не было бы краткого описания. Что тогда? Тогда пришлось бы каждый раз «закрывать и открывать» перенос строки примерно так:
    . Это как минимум неудобно. Но, тем не менее, в строгом XHTML закрывать его обязательно тегом
    .

    Если стоит задача увеличить расстояние по вертикали — между теми строками, где вы вставляете перенос — сделайте двойной перенос, вставив тег
    дважды подряд.

    Чтобы осуществить перенос следующего предложения на новую строку, используем тег br.

    Ура, второе предложение на новой строке.

    Чтобы осуществить перенос следующего предложения на новую строку, используем тег br.

    Ура, второе предложение на новой строке.

    Ночь, улица, фонарь, аптека,

    Бессмысленный и тусклый свет.

    Живи еще хоть четверть века —

    Все будет так. Исхода нет.

    Умрешь — начнешь опять сначала

    И повторится все, как встарь:

    Ночь, ледяная рябь канала,

    Аптека, улица, фонарь.

    Ночь, улица, фонарь, аптека,
    Бессмысленный и тусклый свет.
    Живи еще хоть четверть века —
    Все будет так. Исхода нет.

    Умрешь — начнешь опять сначала
    И повторится все, как встарь:
    Ночь, ледяная рябь канала,
    Аптека, улица, фонарь.

    Зачем придумали тег br?

    Необходимость этого тега существует хотя бы потому что перенести строку «как в Ворде» (как делают неопытные пользователи), путем написания десятков пробелов подряд, — не выйдет.

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

    Читайте также: Как сделать пробел в HTML: https://blogwork.ru/probel-v-html/.

    Но не стоит злоупотреблять тегом
    , чтобы все больше и больше увеличивать расстояние между строками — для этого лучше всего воспользоваться базовыми инструментами HTML+CSS. Недопустимо создание новых абзацев или «как бы абзацев» (это считается плохим подходом) — только перенос строки!

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

    Бонус — br clear

    А как сделать так чтобы текст, в котором вы поставили перенос строки, не обтекал плавающий элемент (это либо изображение с установленным align, либо элемент со свойством float), а начинался ниже элемента? Для этого можно использовать атрибут clear.

    Допустим, у нас есть изображение выровненное по левому краю (align=»left»). Если мы установим
    или
    , то текст после тега
    (следующая строка, которую мы и переносим) будет отображаться как надо, ниже рисунка. Другие значения атрибута clear тега
    сделают так, чтобы текст обтекал рисунок, расположившись справа от него.

    Использование этого специфичного атрибута не приветствуется спецификацией HTML — такой код будет невалидным.

    Кстати, рекомендуем прочесть: Как вставить изображение в HTML.

    БОНУС — тег-разделитель hr

    Тег тоже одиночный, но, в отличие от
    , он используется для создания горизонтального разделителя в виде линии. Более того, внешний вид этой линии мы можем задавать при помощи атрибутов. Но, конечно же, лучше это делать проверенными методами через CSS (что это такое, читайте здесь).

    БОНУС — запрет переноса на новую строку с тегом nobr

    Бывает и так, что мы хотим запретит перенос строки и избежать перевода на новую строку текста: либо между двумя конкретными словами, либо в целом абзаце. Что делать? Использовать тег . Как выглядит на практике? Вот так:

    Что делает тег ? Он говорит браузеру — отображай текст внутри тега без переносов, одной строкой. И, если текст длинный, тогда у нас появится некрасивая и длинная горизонтальная полоса прокрутки, а пользователи должны будут прокрутить текст по горизонтали, чтобы прочитать его полностью.

    Как мы понимаем, это очень неудобно. Но тег есть!

    Итоги — использование br, nobr, hr, p в HTML

    Подводя итог, резюмирую содержание статьи:

    — для того чтобы разделять абзацы

  • тег
    — для того чтобы перенести строку внутри абзаца (недопустимо «создание абзацев» при помощи этого тега или злоупотребление им)
  • тег — для создания горизонтальной линии-разделителя
  • тег — для запрета переноса строк в HTML
  • Как запретить перенос текста? | WebReference

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

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

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

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

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

    Автор и редакторы

    Автор: Влад Мержевич

    Последнее изменение: 14.11.2018

    Редакторы: Влад Мержевич

    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+
    Краткая информация
    Версии CSS
    CSS 1 CSS 2 CSS 2.1 CSS 3
    Описание

    Свойство 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.

    html — Запретить переносы строк

    Stack Overflow на русском

    Начните с этой страницы, чтобы быстро ознакомиться с сайтом

    Подробные ответы на любые возможные вопросы

    Обсудить принципы работы и политику сайта

    Узнать больше о компании Stack Overflow

    Узнать больше о поиске разработчиков или рекламе на сайте

    текущее сообщество

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

    Приветствую вас, дорогие друзья!

    Сегодня я предлагаю вам разобраться, как можно запретить перенос слов CSS-свойствами.

    Дело в том, что по умолчанию в HTML для текста в блоках переносы для слов не заданы, и при уменьшении размеров блока, слова переносятся на новую строку. Но в случае создания сайта на базе CMS, например, WordPress, вы можете столкнуться с тем, что, при адаптации сайта для мобильных устройств, слова будут переноситься посимвольно.

    Делается это, в первую очередь для экономии места, и наилучшего заполнения текстом блока. Но далеко не всегда это удобно и красиво.

    Давайте рассмотрим свойство, которое позволит вам запретить перенос слов CSS при возникновении такой необходимости.

    В случае если у вас при изменении размера блока происходит перестроения текста с переносом отдельных символов на следующую строку, то, скорее всего, в активной теме вашего сайта для всех div применяется CSS-свойство word-break со значением break-all:

    Перенос слов по символьно на новую строку

    Данное свойство задает автоматическую расстановку переносов для наилучшего заполнения блока.

    Если вам нужно его отключить, то в CSS-файле активной темы, для блока, в котором расположен текст, вам нужно задать это же свойство, но со значением normal:

    Запрет переноса слов CSS-свойствами

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

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

    Для правильного определения селектора блока, для которого вы собираетесь добавить стили, вы можете воспользоваться рекомендациями из этой статьи: «Как определить ID и класс элемента на странице?»

    Для более безопасного и удобного добавления стилей для вашего сайта, рекомендую использовать программу NotePad++. Инструкцию по ее настройке и использованию вы сможете найти по этой ссылке: «Редактирование файлов сайта в Notepad++»

    Сегодня у меня все. Надеюсь, показанный в данной статье прием работы поможет вам при создании вашего сайта и адаптации его под мобильные устройства, и у вас не возникнет проблем при необходимости запретить перенос слов CSS.

    Если вам понравилась данная статья, обязательно, оставьте свой комментарий и поделитесь ею в социальных сетях.

    До встречи в следующих статьях!

    С уважением Юлия Гусарь

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

    Сегодня мы с вами немного коснемся темы оформления текстов на вашем сайте. Создавая сайт и ведя уже существующий, нужно грамотно подходить к каждой его мелочи. Я – активный пользователь Интернета, очень часто ищу различную информацию абсолютно по разным темам. Зачастую встречаю сайты, на которых информация представлена примерно в таком виде:

    Не говоря уже о том, что здесь нет никаких выделений (главного в тексте), так и отсутствуют какие-либо параграфы, или попросту – переносы строк. Текст может быть и корректным с точки зрения орфографии и его темы, но визуально – он некомфортен для восприятия. Согласитесь, такой вид куда более читабельный и не «отпугивает» наших пользователей:

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

    Для наглядности за основу мы возьмем популярный в кругах дизайнеров и верстальщиков текст «Lorem Ipsum», а если быть точнее – то несколько его параграфов:

    и рассмотрим популярные способы переноса строк в HTML.

    Первый вариант переноса строк в HTML

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

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

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

    Второй вариант переноса строк в HTML

    В HTML существует такое понятие, как параграфы. Для них отведен специальный тег типа:

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

    Здесь стоит отметить то, что использование пустого тега типа:

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

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

    Этот вариант оформления текстов я люблю больше всего, так как можно настроить желаемое расстояние между параграфами. Тег из первого же варианта я использую редко.

    Третий вариант переноса строк в HTML

    Этот вариант похож на вид параграфов, только вместо тега «p» используется тег «div»:

    Принцип работы тот же самый – каждый блок текста, обернутого в эту конструкцию, начинается с новой строки. Пустой тег не дает дополнительной новой строки. Что касается отступов, в отличие от параграфов, то здесь они отсутствуют. Но вы можете настроить их и сами, через глобальные стили:

    или же через отдельный идентификатор блока:

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

    Перенос слов 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; и посмотрите на наш полигон.

    Приветствую вас, дорогие друзья!

    Сегодня я предлагаю вам разобраться, как можно запретить перенос слов CSS-свойствами.

    Дело в том, что по умолчанию в HTML для текста в блоках переносы для слов не заданы, и при уменьшении размеров блока, слова переносятся на новую строку. Но в случае создания сайта на базе CMS, например, WordPress, вы можете столкнуться с тем, что, при адаптации сайта для мобильных устройств, слова будут переноситься посимвольно.

    Делается это, в первую очередь для экономии места, и наилучшего заполнения текстом блока. Но далеко не всегда это удобно и красиво.

    Давайте рассмотрим свойство, которое позволит вам запретить перенос слов CSS при возникновении такой необходимости.

    В случае если у вас при изменении размера блока происходит перестроения текста с переносом отдельных символов на следующую строку, то, скорее всего, в активной теме вашего сайта для всех div применяется CSS-свойство word-break со значением break-all:

    Данное свойство задает автоматическую расстановку переносов для наилучшего заполнения блока.

    Если вам нужно его отключить, то в CSS-файле активной темы, для блока, в котором расположен текст, вам нужно задать это же свойство, но со значением normal:

    Рекомендуем к прочтению

    Css запрет переноса строк

    Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но с переносом слов CSS точно поможет:

    Зачем переносить «непереносимое»

    В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.

    Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:

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

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

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

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

    Перенос слов средствами CSS

    Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

    1. word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:


    Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:

    • normal – слова не переносятся;
    • break-word – автоматический перенос слов;
    • inherit – наследование значения родителя.

    Пример, иллюстрирующий применение этого свойства:


    В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:


    Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .

    1. word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.

    Свойство принимает три значения:

    • normal – используются правила переноса, установленные по умолчанию;
    • word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
    • keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.

    1. hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
    • none – отключает перенос слов в CSS ;
    • manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса (­) ;
    • auto – браузер автоматически переносит слова на основе своих настроек.

    должен присутствовать атрибут lang со значением «ru» (lang=»ru»).

    Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:

    Запрет переноса слов

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

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


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

    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

    Версии CSS

    CSS 1 CSS 2 CSS 2.1 CSS 3

    Описание

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

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

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

    Объектная модель

    [window.]document.getElementBy >elementID «).style.whiteSpace

    Браузеры

    Браузер 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 есть стиль, которым я покрываю нужное мне словосочетание (2 слова обычно). Хочу, чтобы эти два слова не разделялись переносом строки.

    Допустим после слова «два» у меня должен идти перенос строки (потому что она заканчивается), но я хочу чтобы в таком случае перенос состоялся ДО слова «два», то есть перенеслось сразу словосочетание «два слова».

    Глобально по документу прописан word-wrap: break-word;

    Укрощаем длинный текст средствами HTML и CSS — Блог

    Перенос длинных слов

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

    Браузеры по умолчанию не разбивают длинные слова на несколько строк. Перенос на новую строку происходит только там, где стоит дефис, пробел или Enter (исключение составляют неразрывный пробел &nbsp; и неразрывный дефис &#8209;). При некоторых условиях может появиться ползунок горизонтальной прокрутки, но чаще всего слово выйдёт за границы отведённого ему блока.

    Немного иначе ведут себя flexbox элементы и таблицы, они игнорируют установленную ширину и всегда растягиваются настолько, чтобы вместить текст целиком. В примере ниже flex-контейнеру было задано ограничение по ширине (width: 300px;), однако видно, что в зависимости от контента блок может занимать больше места. Не самая приятная особенность для верстальщика, уверенного, что в его макете всё рассчитано до пикселя.

    Перенос слов средствами HTML

    Как говорилось выше, по умолчанию браузер не переносит слова на несколько строк. Отчасти потому, что он может не знать, как это сделать грамотно.

    Указать браузеру, в каких местах слово может быть разбито переносом можно с помощью символа мягкого разрыва (&shy;). Переносы будут добавлены только там и тогда, когда это необходимо, чтобы слово поместилось в контейнер.

    В HTML5 появился тег <wbr/>, обладающий схожим эффектом, однако он не добавляет символ переноса в месте разрыва слова, что выглядит уже не так красиво.

    <html>
      <head>
        <style>
          .card {
            width: 200px;
            height: 250px;
            background: #7cd4ae;
            padding: 10px;
            display: inline-block;
            margin: 2em;
          }
        </style>
      </head>
    
      <body>
        <div>
          <img src="troll.jpg">
          Двухсот&shy;восьмидесяти&shy;восьми&shy;киллограммовый тролль
        </div>
        <div>
          <img src="troll.jpg">
          Двухсот<wbr/>восьмидесяти<wbr/>восьми<wbr/>киллограммовый тролль
        </div>
      </body>
    </html>

     

     

    Перенос слов средствами CSS

    В CSS есть несколько свойств, влияющих на перенос текста.

    • overflow-wrap (word-wrap) — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-word — принудительно переносить).
    • word-break — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-all — принудительно переносить, keep-all — не переносить, даже если слово содержит дефис).
    • hyphens — автоматический перенос слов, основанный на встроенном в браузер словаре переносов (none — не переносить, auto — переносить длинные слова).

    Название word-wrap является устаревшим, но сохраняется для совместимости со старыми версиями браузеров.

    Свойства word-wrap и word-break на первый взгляд делают одно и то же, но есть небольшие отличия. Word-wrap считается более общим, тогда как word-break предусматривает специальное поведение для китайского, японского и корейского языков. Word-wrap начинает не поместившееся слово с новой строки, а word-break нет. Однако word-break является более приоритетным по отношению к word-wrap.

    Свойство hyphens является наиболее мощным и удобным, но его поддержка браузерами пока не идеальна. Плюс оно требует обязательного указания языка в атрибуте lang тега (например, lang=»ru»).

    <html>
      <head>
        <style>
          .description {
            width: 100px;
            background: #7cd4ae;
            word-wrap: break-word;
            word-break: break-all; /* более приоритетно */
          }
        </style>
      </head>
    
      <body>
        <div lang="ru">
          Верховный суд Лос-Анджелеса решит судьбу огромнейшего трёхсотвосьмидесятикилограммового изумруда
        </div>
      </body>
    </html>

     

    <h3>Перенос длинных слов</h3> <p>Проблема переноса длинных слов встречается не так редко, как может показаться. Если не брать во внимание слова-рекордсмены вроде “метилпропенилендигидроксициннаменилакрилической кислоты”, порой в установленные макетом страницы рамки не умещаются менее экзотические слова.</p> <p>Браузеры по умолчанию не разбивают длинные слова на несколько строк. Перенос на новую строку происходит только там, где стоит дефис, пробел или Enter (исключение составляют неразрывный пробел &amp;nbsp; и неразрывный дефис &amp;#8209;). При некоторых условиях может появиться ползунок горизонтальной прокрутки, но чаще всего слово выйдёт за границы отведённого ему блока.</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+1.png/78167a41-190d-4fa6-ad42-94edb58ce6df?t=1546978623888″ /></p> <p>Немного иначе ведут себя flexbox элементы и таблицы, они игнорируют установленную ширину и всегда растягиваются настолько, чтобы вместить текст целиком. В примере ниже flex-контейнеру было задано ограничение по ширине (width: 300px;), однако видно, что в зависимости от контента блок может занимать больше места. Не самая приятная особенность для верстальщика, уверенного, что в его макете всё рассчитано до пикселя.</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+2.png/00d36fc9-bfa7-45e8-ad39-2ab9012e3abc?t=1546978630901″ /></p> <h4>Перенос слов средствами HTML</h4> <p>Как говорилось выше, по умолчанию браузер не переносит слова на несколько строк. Отчасти потому, что он может не знать, как это сделать грамотно.</p> <p>Указать браузеру, в каких местах слово может быть разбито переносом можно с помощью <strong>символа мягкого разрыва</strong> (<code>&amp;shy;</code>). Переносы будут добавлены только там и тогда, когда это необходимо, чтобы слово поместилось в контейнер.</p> <p>В HTML5 появился тег <strong>&lt;wbr/&gt;</strong>, обладающий схожим эффектом, однако он не добавляет символ переноса в месте разрыва слова, что выглядит уже не так красиво.</p> <pre> &lt;html&gt; &lt;head&gt; &lt;style&gt; .card { width: 200px; height: 250px; background: #7cd4ae; padding: 10px; display: inline-block; margin: 2em; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;img src=»troll.jpg»&gt; Двухсот&amp;shy;восьмидесяти&amp;shy;восьми&amp;shy;киллограммовый тролль &lt;/div&gt; &lt;div&gt; &lt;img src=»troll.jpg»&gt; Двухсот&lt;wbr/&gt;восьмидесяти&lt;wbr/&gt;восьми&lt;wbr/&gt;киллограммовый тролль &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p>&nbsp;</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+3.png/04451e1d-9f02-48c5-8f66-b18ac5d042e8?t=1546979243873″ /></p> <p>&nbsp;</p> <h4>Перенос слов средствами CSS</h4> <p>В CSS есть несколько свойств, влияющих на перенос текста.</p> <ul> <li>overflow-wrap (word-wrap) — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-word — принудительно переносить).</li> <li>word-break — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-all — принудительно переносить, keep-all — не переносить, даже если слово содержит дефис).</li> <li>hyphens — автоматический перенос слов, основанный на встроенном в браузер словаре переносов (none — не переносить, auto — переносить длинные слова).</li> </ul> <p>Название word-wrap является устаревшим, но сохраняется для совместимости со старыми версиями браузеров.</p> <p>Свойства word-wrap и word-break на первый взгляд делают одно и то же, но есть небольшие отличия. Word-wrap считается более общим, тогда как word-break предусматривает специальное поведение для китайского, японского и корейского языков. Word-wrap начинает не поместившееся слово с новой строки, а word-break нет. Однако word-break является более приоритетным по отношению к word-wrap.</p> <p>Свойство hyphens является наиболее мощным и удобным, но его поддержка браузерами пока не идеальна. Плюс оно требует обязательного указания языка в атрибуте lang тега (например, lang=»ru»).</p> <pre> &lt;html&gt; &lt;head&gt; &lt;style&gt; .description { width: 100px; background: #7cd4ae; word-wrap: break-word; word-break: break-all; /* более приоритетно */ } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div lang=»ru»&gt; Верховный суд Лос-Анджелеса решит судьбу огромнейшего трёхсотвосьмидесятикилограммового изумруда &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p>&nbsp;</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+4.png/eeaafee6-6067-4be4-92db-fd8c5b910a93?t=1546979251721″ /></p> <div><textarea name=»blogs-entry-content-2103008_original»></textarea></div> <script type=»text/javascript»>CKEDITOR.disableAutoInline=true;CKEDITOR.env.isCompatible=true;</script>

    Css запретить перенос текста

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

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

    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

    Версии CSS

    CSS 1 CSS 2 CSS 2.1 CSS 3

    Описание

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

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

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

    Объектная модель

    [window.]document.getElementById(» elementID «).style.whiteSpace

    Браузеры

    Браузер 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, которые управляют переводом исходного текста в форматированный и переносом строк. Различные свойства CSS обеспечивают контроль над преобразованием регистра, обработкой пробелов, правилами переноса и переносом текста и строк, выравниванием, интервалами и отступами.

    Основной единицей текста является символ. Тем не менее, поскольку системы письма не всегда так просты, как основной английский алфавит, то, чем на самом деле является символ, зависит от контекста, в котором используется этот термин. Например, в корейской системе письма каждое квадратное представление слога (например, 한 = хань) можно считать символом. Однако квадратный символ действительно состоит из нескольких букв, каждая из которых представляет фонему (например, ㅎ = h, ㅏ = a, ㄴ = n), и каждая из них также может считаться символом.

    CSS построен на Unicode.

    1. Преобразование текста: свойство text-transform

    Свойство text-transform стилизует текст. Оно не влияет на базовое содержимое и не должно влиять на содержимое операции копирования и вставки простого текста.

    text-transform
    Значения:
    none Значение по умолчанию, означает отсутствие эффектов.
    capitalize Изменяет написание первой буквы каждого слова в элементе, делая её прописной.
    uppercase Выводит все слова в элементе прописными буквами.
    lowercase Выводит все слова в элементе строчными буквами.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента.

    2. Обработка пробелов и переносы строк: свойство white-space

    Свойство white-space обрабатывает пробелы между словами и переносы строк внутри элемента.

    white-space
    Значения:
    normal Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости.
    nowrap Запрещает переносы строк, за исключением применения
    .
    pre Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк.
    pre-wrap Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо.
    pre-line Удаляет лишние пробелы, за исключением случаев
    .
    break-spaces Поведение идентично pre-wrap , за исключением того, что: любая последовательность неудаляемых пробелов всегда занимает место, в том числе в конце строки; возможность переноса строки существует после каждого неудаляемого пробела, в том числе между пробелами.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента.

    3. Настройка табуляции: свойство tab-size

    Свойство tab-size используется для изменения величины отступа, получаемого с помощью клавиши ТAB. Значения свойства игнорируются, когда установлено одно из трёх значений pre-line , normal или nowrap свойства white-space .

    Работает только для элементов

    4. Разрыв строки и границы слов

    Когда содержимое на строчном уровне разбивается на строки, оно разбивается на линейные блоки. Такое разбиение называется разрыв строки.

    Когда строка прерывается из-за явных элементов управления разрывом строки, например, символа новой строки или тега
    , начала или конца блока — это принудительный разрыв строки.

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

    4.1. Правила разрыва для букв: свойство word-break

    Свойство word-break определяет возможности мягкого переноса между буквами, т.е. когда допустимо разбивать строки текста. В частности, оно контролирует, существует ли возможность мягкого переноса между смежными типографскими буквенными единицами и/или цифрами. Это не влияет на правила, регулирующие возможности мягкого переноса, созданные пробелами.

    word-break
    Значения:
    normal Слова разрываются в соответствии с их обычными правилами. Значение по умолчанию.
    break-all Разрыв допускается в пределах слов. Перенос слов не применяется.
    keep-all Запрещает разрывы между парами символов.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента.
    4.2. Разрыв строки: line-break

    Свойство line-break определяет правила переноса строк, применяемых внутри элемента, в частности то, как перенос взаимодействует со знаками препинания и символами.

    line-break
    Значения:
    auto Браузер определяет набор используемых ограничений на разрыв строки, которые могут варьироваться в зависимости от длины линии, например, использовать менее строгий набор правил разрыва строки для коротких строк. Значение по умолчанию.
    loose Разбивает текст, используя наименее ограничивающий набор правил переноса строк. Обычно используется для коротких строк, например, в газетах.
    normal Разбивает текст, используя наиболее распространенный набор правил переноса строк.
    strict Разбивает текст, используя строгий набор правил переноса строк.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента.
    4.3. Расстановка переносов: свойство hyphens

    Свойство hyphens определяет, разрешено ли использование переносов для создания возможностей мягкого переноса внутри строки текста.

    Расстановка переносов — это контролируемое разбиение слов, при котором им обычно не разрешается разрываться, чтобы улучшить расположение абзацев. Как правило, разбиение слов происходит по слоговым или морфемным границам и при визуальном указании на разделение (обычно путем вставки дефиса, ‐ ). В некоторых случаях переносы могут также изменить написание слова. В любом случае, перенос слов является только эффектом рендеринга: он не должен влиять ни на содержимое документа, ни на выбор текста или поиск.

    CSS Text Level 3 не определяет точные правила переноса слов, поэтому рекомендуется выбирать подходящие для языка точки переноса.

    hyphens
    Значения:
    none Слова не переносятся, даже если символы внутри слова явно определяют возможности переноса.
    manual Слова переносятся только в тех местах, где внутри слова есть символы, которые явно указывают на возможность переноса слов (специальный символ ­ ). Значение по умолчанию.
    auto Слова могут быть разбиты на возможности переноса, определяемые автоматически соответствующим языку ресурсом переноса в дополнение к тем, которые явно указаны условным дефисом. Необходимо задать язык своего контента (например, используя HTML-атрибут lang или заголовок HTTP Content-Language), чтобы получить правильный автоматический перенос слов.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента.
    4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap

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

    overflow-wrap, word-wrap
    Значения:
    normal Неразрывные строки могут разрываться только в разрешенных точках разрыва. Значение по умолчанию.
    break-word
    anywhere Неразрывная последовательность символов может быть разбита в произвольной точке, если в строке нет других приемлемых точек разрыва. Влияет только на визуальное отображение, не затрагивая исходный текст. В точке разрыва строки символ переноса не добавляется. Возможности мягкого переноса, представленные в любом месте, учитываются при расчете собственных размеров минимального содержимого.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента.

    5. Выравнивание и выключка строк

    Выравнивание и выключка строк контролируют, как встроенный контент распределяется в линейном блоке.

    5.1. Краткая запись для выравнивания текста: свойство text-align

    Блок текста представляет собой набор линейных блоков. Свойство text-align задает свойства text-align-all и text-align-last и описывает, как блоки на уровне строки в каждом линейном блоке выравниваются относительно начальной и конечной сторон линейного блока. Значения, отличные от justify-all или match-parent , присваиваются text-align-all и сбрасываются в text-align-last на auto .

    text-align
    Значения:
    start Содержимое на уровне строки выравнивается по начальному краю линейного блока. Значение по умолчанию.
    end Содержимое на уровне строки выравнивается по конечному краю линейного блока.
    left Содержимое на уровне строки выравнивается по левому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста.
    right Содержимое на уровне строки выравнивается по правому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста.
    center Содержимое на уровне строки центрируется внутри линейного блока.
    justify Текст выравнивается по ширине линейного блока, чтобы точно заполнить поле строки, прижимаюсь к левому и правому краям родительского элемента. Если иное не указано в text-align-last , последняя строка перед принудительным разрывом или конец блока выравнивается по началу. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами.
    justify-all Устанавливает text-align-all и text-align-last в justify , также выравнивая последнюю строку.
    match-parent Значение ведет себя так же, как inherit за исключением того, что унаследованное значение start или end интерпретируется относительно значения direction (или исходного содержащего блока, если нет родителя) и приводит к вычисленному значению left или right .
    inherit Наследует значение свойства от родительского элемента.
    5.2. Выравнивание текста по умолчанию: свойство text-align-all

    Свойство text-align-all — сокращенный вариант свойства text-align определяет выравнивание всех строк содержимого в контейнере блока, за исключением последних строк, переопределенных значением text-align-last . Принимает значения start , end , left , right , center , justify и match-parent .

    5.3. Выравнивание последней строки: свойство text-align-last

    Свойство text-align-last описывает, как выравнивается последняя строка блока или строки непосредственно перед принудительным разрывом строки.

    Если задано значение auto , содержимое в соответствующей строке выравнивается по text-align-all , если только для text-align-all не настроено justify — в этом случае оно выравнивается по началу блока. Все остальные значения интерпретируются как описано для text-align .

    Принимает значения auto , start , end , left , right , center , justify и match-parent .

    6. Промежутки

    CSS позволяет контролировать промежутки между словами и типографскими символами с помощью свойств word-spacing и letter-spacing .

    6.1. Промежутки между словами: свойство word-spacing

    Свойство word-spacing определяет дополнительный интервал между словами.
    Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.

    На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине.

    word-spacing
    Значения:
    normal Дополнительный интервал не применяется. Вычисляет в 0 . Значение по умолчанию.
    длина Задает дополнительный интервал в дополнение к внутреннему интервалу между словами, определенному шрифтом. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента.
    6.2. Трекинг: свойство letter-spacing

    Свойство letter-spacing определяет дополнительный интервал, или трекинг, между смежными типографскими символами. Межбуквенный интервал является дополнением к кернингу и word-spacing . В зависимости от действующих правил выравнивания пользовательские агенты могут дополнительно увеличивать или уменьшать расстояние между типографскими символьными единицами для выравнивания текста.

    letter-spacing
    Значения:
    normal Дополнительный интервал не применяется. Вычисляет в 0 . Значение по умолчанию.
    длина Определяет дополнительный интервал между типографскими символами. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента.

    7. Отступ первой строки: свойство text-indent

    Свойство text-indent задает отступ, применяемый к строкам встроенного содержимого в блоке. Отступ обрабатывается как поле, примененное к начальному краю линейного блока.
    Если в первой строке блочного элемента присутствует изображение, то оно сдвинется вместе с остальным текстом.

    CSS word-wrap свойство


    Пример

    Позвольте длинным словам иметь возможность разбивать и переносить их на следующую строку:

    div {
    перенос слов: break-word;
    }

    Попробуй сам »

    Определение и использование

    Свойство word-wrap позволяет разбивать и переносить длинные слова на следующую строку.

    Значение по умолчанию: нормальный
    Наследуется: да
    Анимационный: нет.Читать о Анимация
    Версия: CSS3
    Синтаксис JavaScript: объект .style.wordWrap = «break-word» Попытайся

    Поддержка браузера

    Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

    Недвижимость
    Word-Wrap 4.0 5,5 3,5 3,1 10,5

    Синтаксис CSS

    перенос слов: обычный | брейк-слово | начальный | наследовать;

    Значения недвижимости

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

    Связанные страницы

    Учебник CSS: CSS Text Effects


    ,

    overflow-wrap — веб-технология для разработчиков

    CSS-свойство overflow-wrap применяется к встроенным элементам, определяя, должен ли браузер вставлять разрывы строк в иным образом неразрывной строке, чтобы текст не переполнял ее строку.

    Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

    Примечание: В отличие от разбиения по словам , overflow-wrap создаст разрыв только в том случае, если целое слово не может быть помещено в его собственную строку без переполнения.

    Свойство изначально было нестандартным и без префикса Microsoft расширением word-wrap , и было реализовано большинством браузеров с тем же именем. С тех пор он был переименован в overflow-wrap , а word-wrap является псевдонимом.

    Синтаксис

     / * Значения ключевых слов * /
    переполнение: нормальное;
    overflow-wrap: break-word;
    переполнение: где угодно;
    
    / * Глобальные значения * /
    переполнение-обтекание: наследовать;
    переполнение: начальный;
    переполнение: не установлено;
     

    Свойство overflow-wrap указывается как одно ключевое слово, выбранное из списка значений ниже.

    Значения

    нормальный
    Строки могут разрываться только в обычных точках разрыва слов (например, пробел между двумя словами).
    в любом месте
    Во избежание переполнения неразрывная строка символов, например длинное слово или URL, может быть разбита в любой точке, если в строке нет других допустимых точек разрыва. В точке останова символ переноса не вставляется. Возможности мягкого переноса, представленные разрывом слов, учитываются при расчете собственных размеров минимального содержимого.
    ключевое слово
    То же, что и значение в любом месте , с обычно неразрывными словами, которые можно разбивать в произвольных точках, если в строке нет других приемлемых точек разрыва, но возможности мягкого переноса, представленные разрывом слова, НЕ учитываются при вычислении минимального содержания внутренние размеры.

    Формальное определение

    Формальный синтаксис

     нормальный | брейк-слово | где-нибудь 

    Примеры

    Сравнение переполнения, переноса слов и дефисов

    В этом примере сравниваются результаты переполнения , разбиения по словам и дефиса при разбивании длинного слова.

    HTML
     

    Говорят, что рыбалка на Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg , хотя я никогда не был там сам (<Код> нормально )

    Говорят, что рыбалка в Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg , хотя я никогда не был там сам ( overflow-wrap: где угодно )

    Говорят, что рыбалка в Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg , хотя я никогда не был там сам( overflow-wrap: break-word )

    Говорят, что рыбалка в Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg , хотя я никогда не был там сам (<Код> слово-пауза )

    Говорят, что рыбалка в Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg , хотя я никогда не был там сам ( дефисы , без атрибута lang )

    Они говорят, что рыбалка отлично Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg , хотя я никогда не был там сам( дефисы , английские правила)

    Они говорят, что рыбалка отлично Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg , хотя я никогда не был там сам ( дефисы , немецкие правила)

    CSS
     р {
       ширина: 13em;
       поле: 2px;
       фон: золото;
    }
    
    .ow -where {
       переполнение: где угодно;
    }
    
    .ow-break-word {
       overflow-wrap: break-word;
    }
    
    .word-break {
       разбить слово: разбить все;
    }
    
    ,дефисы {
       дефисы: авто;
    }
     
    Результат

    Технические характеристики

    Совместимость браузера

    Обновление данных о совместимости GitHub 901 Firefo
    Рабочий стол Мобильный
    Chrome Edge Firefox Internet Explorer Opera Safari Android-веб-браузер Chrome для Android Opera для Android Safari на iOS Samsung Интернет
    переполнение Chrome Полная поддержка 23
    Полная поддержка 23
    Полная поддержка 1
    Дополнительное имя Использует нестандартное имя: word-wrap
    Edge Полная поддержка 18
    Полная поддержка 18
    Полная поддержка 12
    Дополнительное имя Использует нестандартное имя: word-wrap
    Firefox Полная поддержка 49
    Полная поддержка 49
    Полная поддержка 3.5
    Альтернативное имя Использует нестандартное имя: word-wrap
    IE Полная поддержка 5,5
    Полная поддержка 5.5
    Альтернативное имя Использует нестандартное имя: word-wrap
    Opera Полная поддержка 12.1
    Полная поддержка 12,1
    Полная поддержка 10.5
    Альтернативное имя Использует нестандартное имя: word-wrap
    Safari Полная поддержка 6,1
    Полная поддержка 6,1
    Полная поддержка 1
    Альтернативное имя Использует нестандартное имя: word-wrap
    WebView Android Полная поддержка 4.4
    Полная поддержка 4.4
    Полная поддержка 1
    Альтернативное имя Использует нестандартное имя: word-wrap
    Chrome Android Полная поддержка 25
    Полная поддержка 25
    Полная поддержка 18
    Альтернативное имя Использует нестандартное имя: word-wrap
    Firefox Android Полная поддержка 49
    Полная поддержка 49
    Полная поддержка 4
    Альтернативное имя Использует нестандартное имя: word-wrap
    Opera Android Полная поддержка 12.1
    Полная поддержка 12,1
    Полная поддержка 11
    Альтернативное имя Использует нестандартное имя: word-wrap
    Safari iOS Полная поддержка 7
    Полная поддержка 7
    Полная поддержка 1
    Дополнительное имя Использует нестандартное имя: word-wrap
    Samsung Интернет Android Полная поддержка 1.5
    Полная поддержка 1,5
    Полная поддержка 1.0
    Альтернативное имя Использует нестандартное имя: word-wrap
    в любом месте Chrome Полная поддержка 80 Край Полная поддержка 80 Firefox Полная поддержка 65 IE Нет поддержки Opera Полная поддержка 67 Safari Нет поддержки WebView Android Полная поддержка 80 Chrome Android Полная поддержка 80 Firefox Android Полная поддержка 65 Opera Android Нет поддержки Safari iOS Нет поддержки Samsung Интернет Android Нет поддержки
    , ключевое слово Chrome Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 3.5 IE Полная поддержка 5.5 Opera Полная поддержка 10,5 Safari Полная поддержка 1 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Opera Android Полная поддержка 11 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0

    Легенда

    Полная поддержка
    Полная поддержка
    Нет поддержки
    Нет поддержки
    Используется нестандартное имя.
    Использует нестандартное имя.

    См. Также

    ,

    html - принудительная перенос слов через CSS

    Переполнение стека
    1. Товары
    2. Клиенты
    3. Случаи использования
    1. Переполнение стека Публичные вопросы и ответы
    2. Команды Частные вопросы и ответы для вашей команды
    3. предприятие Частные вопросы и ответы для вашего предприятия
    4. работы Программирование и связанные с ним технические возможности карьерного роста
    5. Талант Нанимать технический талант
    6. реклама Связаться с разработчиками по всему миру
    ,
    html - как предотвратить перенос текста в ячейке таблицы
    Переполнение стека
    1. Товары
    2. Клиенты
    3. Случаи использования
    1. Переполнение стека Публичные вопросы и ответы
    2. Команды Частные вопросы и ответы для вашей команды
    3. предприятие Частные вопросы и ответы для вашего предприятия
    4. работы Программирование и связанные с ним технические возможности карьерного роста
    5. Талант Нанимать технический талант
    6. реклама Связаться с разработчиками по всему миру
    ,