Содержание

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

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

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

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

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

В случае если у вас при изменении размера блока происходит перестроения текста с переносом отдельных символов на следующую строку, то, скорее всего, в активной теме вашего сайта для всех 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 слова обычно). Хочу, чтобы эти два слова не разделялись переносом строки.

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

Свойство white-space

Свойство white-space устанавливает как переносить текст на новую строку, а также как отображать пробелы между словами и переносы строк (места, где был нажат Enter при наборе кода).

Синтаксис

Значения

Значение Описание
nowrap Запрещает тексту переносится на другую строку, даже если он не помещается в ширину контейнера (в этом случае текст просто вылезет за его границы). Однако, добавление тега br заставит текст перенестись на новую строку.
pre Текст показывается так, как был набран в блокноте при верстке сайта: со всеми пробелами и enter-ами (если в коде набрано несколько пробелов — на экране тоже будет несколько). При этом браузер не будет переносить текст на новую строку, если он не помещается в контейнер — текст просто вылезет за его границы. Аналог тега pre, но в отличие от него не меняет шрифт на моноширинный (про моноширинный шрифт см. свойство font-family).
pre-wrap То же самое, что и pre, отличие в том, что если текст слишком длинный и не влазит в контейнер — браузер перенесет его на другую строку.
pre-line Браузер учитывает только Enter-ы в HTML коде и игнорирует все остальное (несколько пробелов будут выглядеть как один, браузер сам расставляет разрывы строк).
normal Стандартное поведение: браузер сам расставляет разрывы строки так, чтобы слова поместились в контейнер. Несколько пробелов в коде будут выглядеть как один на экране.

Значение по умолчанию: normal .

Пример . Значение nowrap

В данном примере текст не поместится в контейнер и вылезет за его границы, так как задано значение nowrap :

Пример . Значение nowrap и тег br

Если добавить тег br — текст перенесется на новую строку (именно в том месте, где стоит br):

Пример . Значение pre

В данном примере текст показывается так, как был набран в редакторе HTML кода (со всеми отступами клавишей Tab, с Enter и так далее):

Пример . Значение pre-wrap

А сейчас текст показывается так, как был набран в редакторе HTML кода, однако, вылезающие части переносятся на новую строку:

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

    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

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

    Дефис

    Первое решение для переноса длинных слов – с помощью дефиса.

    Код CSS

    .defisi {
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }
    

    Поддержка браузерами: CSS-дефисы поддерживаются почти всеми современными браузерами, за исключением Chrome, Opera, Android. Также, очень часто дефис вставляется в местах, ошибочных с грамматической точки зрения.

    Обрыв слова

    Обрыв слова – это свойство CSS, указывающее на то, следует ли разрывать строки внутри слов.

    Код CSS

    .obriv-slova {
      -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
    }
    

     

    Поддержка браузерами: Обрыв слов поддерживается во всех браузерах, за исключением Opera Mini и старых версий Opera.

     

    Обертка переполнения

    Следующее решение – это использование Обертки переполнения (overflow-wrap).

    Код CSS

    .obertka-perepolneniya {
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    

    Поддержка браузерами: поддерживается практически во всех браузерах. Примечание: Некоторые браузеры требуют использования «word-wrap» вместо «overflow-wrap».

     

    Многоточие

    Еще один вариант – использование многоточий.

    Код CSS

    .mnogotochiye {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    

    Поддержка браузерами: поддерживается всеми современными браузерами.

    Это работающий метод, но далеко не идеальный.

     

    Финальное решение: Использование Обертки переполнения и дефиса.

    Код CSS

    .finalnoye-resheniye {
      overflow-wrap: break-word;
      word-wrap: break-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
    }
    

     

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

     

     

    Перенос длинных слов с помощью CSS. Как сделать в css перенос слов, которые не влазят в блок? Принудительный перенос строки html

    Всем привет). Я продолжаю писать о различных полезных свойствах языка css, которые так или иначе могут помочь при верстке. И сегодня я хочу рассказать, как делать в css перенос слов, если они не влазят в свой контейнер. Я покажу вам все на реальном примере.

    Включаем перенос для слов, которые не влезают

    Допустим, у меня есть блок, шириной 100 пикселей и мне в него нужно написать какой-то текст. В тексте попадается слово «самораспаковывающийся «. Таким бывает архив, например) Но не суть. Слово очень длинное, оно просто не влезет в контейнер по ширине. Давайте его напишем в такой узкий блок (100 пикселей). Что будет?

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

    Word-wrap: break-word;

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

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

    В каких случаях использовать word-wrap

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

    Итак, в этой статье мы узнали, как делать перенос слов в css. На этом у меня сегодня все. До встречи.

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

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

    Обозначения

    Описание Пример
    Указывает тип значения.
    A && B Значения должны выводиться в указанном порядке. &&
    A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
    A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
    Группирует значения. [ crop || cross ]
    * Повторять ноль или больше раз. [,]*
    + Повторять один или больше раз. +
    ? Указанный тип, слово или группа не является обязательным. inset?
    {A, B} Повторять не менее A, но не более B раз. {1,4}
    # Повторять один или больше раз через запятую. #
    ×

    Значения

    normal Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью
    ). break-word Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.

    Пример

    word-wrap

    Cуществительное

    высокопревосходительство

    Одушевленное существительное

    одиннадцатиклассница

    Химическое вещество

    метоксихлордиэтиламинометилбутиламиноакридин

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

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

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

    Объект .style.wordWrap

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation (Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
    • Candidate Recommendation (Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation (Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft (Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor»s draft (Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft (Черновик спецификации ) — первая черновая версия стандарта.
    ×

    Всем привет и приступим. Допустим у нас есть следующий текст:

    Правительство Объединенных Арабских Эмиратов и администрация концентрируют в этом городе все самые новые технологии, основанные на последних достижениях науки и техники, пытаясь превратить его город будущего, словно сошедший с экрана какого-нибудь научно-фантастического фильма. К этим технологиям можно отнести роботов-полицейских, автомобили-роботы и транспортную систему Hyperloop, а в недалеком будущем в Дубайе начнет функционировать служба автоматических летающих такси. И в рамках подготовки к этому событию электрический двухместный летательный аппарат Volocopter с 18 роторами, который и будет использоваться в качестве такси, совершил первый полет в автоматическом режиме, пишут…

    здесь у нас указан некий текст с которым мы сейчас начнем работать.

    И первое свойство которое мы с вами рассмотрим называется word-break

    word-break: normal | keep-all | break-all

    Нас в основном интересуют два значения данного свойства normal — дефолтное значение и break-all с помощью которого мы устанавливаем что перенос слов осуществляется посимвольно. Что касается keep-all, то данное значение служит для переноса слов на китайском, японском и корейском языках.

    P{ word-break: break-all;. }

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

    К счастью есть аналогичное свойство которое переносит только не влезающие слова по символам. Называется оно overflow-wrap:

    P{ overflow-wrap: break-word; }

    и после применения значения break-word, весь наш текст переносится по словам, а слова которые не влезают в заданную ширину переносятся посимвольно. Можно сказать задача выполнена! Помимо значения break-word данное свойство принимает:

    overflow-wrap: normal | break-word | inherit;

    Теперь давайте перейдем к более продвинутому свойству css для переноса слов в тексте.

    Рассмотрим свойство white-space c помощью которого мы можем имитировать работу тега pre не меняя сам текст на моноширный.

    white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

    По сути с помощью данного свойства мы работает только с пробелами в тексте. К примеру если мы применим следующий стиль к нашему тексту:

    White-space: nowrap;

    все переносы строк у нас будут проигнорированы и наш текст отобразиться в виде одной строки.

    White-space: pre;

    В случае значения pre все переносы строк будут аналогичны переносам в исходном коде. Причем если текст не будет помещаться в заданную ширину, то он переносится не будет. Если мы хотим чтобы он переносился, то нам нужно указать значение pre-line.

    Если же мы хотим чтобы у нас учитывались не только переносы строк исходного кода, но и пробелы между словами, тогда нужно указать:

    White-space: pre-wrap;

    Вот в принципе и все что я хотел вам рассказать про переносы слов средствами css. Надеюсь данная статья была для вас полезна и вы не раз еще воспользуетесь полученными знаниями.

    Ну а я же с вами прощаюсь. Желаю успехов и удачи! Пока!

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

    Версии CSS

    CSS 1 CSS 2 CSS 2.1 CSS 3

    Описание

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

    Помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован
     пользователем. Таким образом, white-space
     имитирует
     работу тега 
    Но в отличие от него не меняет шрифт
     на моноширинный.
     

    Синтаксис

    white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

    Значения

    normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
    переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.

    Действие значений на текст представлено в табл. 1.

    HTML5 CSS2.1 IE Cr Op Sa Fx

    white-space

    Пример

    Великая теорема Ферма
    X n + Y n = Z n
    где n - целое число > 2

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

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

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

    document.getElementById("elementID ").style.whiteSpace

    Браузеры

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

    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 .

    Определяют как переносить длинные слова:

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

    overflow-wrap
    word-wrap
    word-break
    line-break
    hyphens

    уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти-килограммовый корчеватель‐бульдозер‐погрузчик

    lang="ru" lang="ru" >уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти- килограммовый корчеватель‐бульдозер‐погрузчик

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

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

    Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим 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" .

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

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

    Управлять переносом слов при hyphens: auto;

    Тетрагидропиранилциклопентилтетрагидропиридопиридино вые

    Тетрагидропиранилциклопентилтетрагидропиридопиридиновые

    Отключить перенос слов wordpress — TeleNets

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

    1. только там, где стоит чёрточка, пробел или Enter (искл., нераз­рыв­ный пробел &nbsp; и нераз­рыв­ный дефис &#8209;). Между частями одного слова пишется дефис (например, красно-жёлтый), между словами — тире. “Мягкий дефис” &shy; про­яв­ля­ет­ся только при необ­хо­ди­мо­сти переноса. Если слово выходит за рамки родителя, то <wbr> или &#8203; переносит его часть без чёрточки. В мате­ма­ти­че­ских выра­же­ни­ях исполь­зу­ет­ся минус (например, 5 − 2). В номерах телефонов отоб­ра­жа­ет­ся цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
    2. после любого символа.
    3. согласно правилам русского языка с авто­ма­ти­че­ским при­ме­не­ни­ем дефиса.

    overflow-wrap ▼ break-word
    word-wrap ▼ break-word
    word-break ▼ keep-all | break-all
    line-break ▼ loose | normal | strict
    hyphens ▼ none | auto

    <style>
    .div {
      overflow-wrap: normal;  
      word-wrap: normal;
      word-break: keep-all;  
      line-break: normal;  
     -webkit-hyphens: auto; ​-ms-hyphens: auto; hyphens: auto;  
     ​width: 50%;
    }
    </style>

    Что бы узнать класс смотрим правой кнопкой мыши на сайте в браузере, посмотреть код/исследовать элемент в зависимости от вашего браузера

    Находите наименование класса и вставляете в редакторе CSS вот такой код на каждый класс:

    .class_name{
    word-break:normal;

    overflow-wrap: normal;

    word-wrap: normal;

    word-break: keep-all;

    line-break: normal;

    -webkit-hyphens: auto; ​-ms-hyphens: auto; hyphens: auto;
    }

    Вот тут смотрите подробнее:

    http://shpargalkablog.ru/2013/02/word-wrap.html

    Принудительный перенос строки html. Перенос длинных слов с помощью CSS

    Влад Мержевич

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

    Использование тега

    Тег введён в HTML5 и создаёт перенос слов при необходимости. В тех местах, где по правилам русского языка допустим перенос, вставляем (пример 1). Если слово целиком помещается в отведённую ширину, этот тег никак себя не проявит и о его наличии мы даже не узнаем. Если слово не помещается, браузер в месте нахождения тега создаёт перенос.

    Пример 1. Тег

    Переносы

    Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.

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

    Рис. 1. Текст с переносами слов

    Мягкий перенос

    Применение имеет серьёзный недостаток — понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол — . Он выполняет ту же роль, что и тег — не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис (пример 2).

    Пример 2. Мягкий перенос

    Переносы

    Один-надцатиклас-сница Анжелика после окончания школы выбрала профессию дело-произ-водитель-ницы.

    Результат данного примера показан на рис. 2. Заметьте, насколько эстетичнее и понятнее стал выглядеть текст в сравнении с рис. 1.

    Рис. 2. Текст с переносами слов

    Свойство word-break

    Чтобы автоматизировать процесс создания переносов воспользуйтесь свойством word-break со значением break-all (пример 3). Добавлять какие-либо символы или теги в HTML уже не придётся, всё берут на себя стили.

    Пример 3. Применение word-break

    Переносы

    Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.

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

    Рис. 3. Текст с переносами слов

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

    Свойство hyphens

    И, наконец, самое мощное и удобное свойство для автоматического добавления переносов — hyphens . Его действие основано на встроенном в браузере словаре переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, для тега добавляем атрибут lang со значением ru (пример 4).

    Пример 4. Использование hyphens

    Переносы

    Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.

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

    Рис. 4. Текст с переносами слов

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

    Нередко возникает и обратная задача — запретить переносы в тех местах, где они по правилам языка недопустимы. Например, нельзя отрывать единицы измерения от числа (10 мл), обозначение года (54 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на неразрывный пробел (пример 5).

    Пример 5. Использование

    Переносы

    Озеро по координатам 70° 58′ 19″ с. ш. 97° 24′ 5″ в. д. расположено в Таймырском Долгано-Ненецком районе Красноярского края России.

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

    Определяют как переносить длинные слова:

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

    overflow-wrap
    word-wrap
    word-break
    line-break
    hyphens

    уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти-килограммовый корчеватель‐бульдозер‐погрузчик

    lang=»ru» lang=»ru» >уже переосвидетельствовался наш тысячадевятьсотдевяностодевятикилограммовый корчеватель‐бульдозер‐погрузчик

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

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

    Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим 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» .

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

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

    Управлять переносом слов при hyphens: auto;

    Тетрагидропиранилциклопентилтетрагидропиридопиридино вые

    Тетрагидропиранилциклопентилтетрагидропиридопиридиновые

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

    Версии CSS

    CSS 1 CSS 2 CSS 2.1 CSS 3

    Описание

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

    Помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован
     пользователем. Таким образом, white-space
     имитирует
     работу тега 
    Но в отличие от него не меняет шрифт
     на моноширинный.
     

    Синтаксис

    white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

    Значения

    normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
    переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.

    Действие значений на текст представлено в табл. 1.

    HTML5 CSS2.1 IE Cr Op Sa Fx

    white-space

    Пример

    Великая теорема Ферма
    X n + Y n = Z n
    где n - целое число > 2

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

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

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

    document.getElementById("elementID ").style.whiteSpace

    Браузеры

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

    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 .

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

    Свойство word-wrap

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

    Проверка перенова слов

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

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

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

    P{ font: bold 30px Helvetica, sans-serif; width: 25px; word-wrap: break-all; }

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

    Свойство white-space

    Распространенная ошибка начинающих веб-разработчиков — пытаться редактировать текст пробелами или нажатиями клавиши Enter, а потом удивляться, почему их усилия не видны на странице. Сколько бы вы раз ни нажали "Ввод", браузер это проигнорирует. Но есть способ заставить его отображать текст так, как нужно вам, и принимая во внимание все интервалы.

    В документе CSS перенос строки, назначенный с помощью свойства white-space, можно настроить так, чтобы он осуществлялся с учетом пробелов или нажатия клавиши "Ввод". White-space со значением pre-line заставит браузер видеть в тексте Enter.

    Проверка перенова слов

    Если поменять pre-line на pre-wrap в коде CSS, перенос строки произойдет с учетом пробелов. И наоборот, запретить любой перенос, присвоив тексту свойство white-space со значением nowrap:

    #wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: nowrap; }

    Text-overflow

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

    • clip — просто обрезает текст;
    • ellipsis — добавляет многоточие.
    #wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; text-overflow: ellipsis;/*Добавляем многоточие*/ white-space: nowrap; /* Запрещаем перенос строк */ overflow: hidden;/*Прячем все что выходит за рамки контейнера*/ }

    Чтобы свойство работало, элементу также необходимо назначить запрет на перенос строки и overflow со значением hidden.

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

    Версии CSS

    CSS 1 CSS 2 CSS 2.1 CSS 3

    Описание

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

    Помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован
     пользователем. Таким образом, white-space
     имитирует
     работу тега 
    Но в отличие от него не меняет шрифт
     на моноширинный.
     

    Синтаксис

    white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

    Значения

    normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
    переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.

    Действие значений на текст представлено в табл. 1.

    HTML5 CSS2.1 IE Cr Op Sa Fx

    white-space

    Пример

    Великая теорема Ферма
    X n + Y n = Z n
    где n - целое число > 2

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

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

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

    document.getElementById("elementID ").style.whiteSpace

    Браузеры

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

    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 — перенос слов, который переносит все слова, не нарушая их?

    Мне нужно уместить длинный текст шириной около 300 пикселей. Я использую этот css:

     div {      
          width: 300px;
          color:white;
          word-wrap:break-word;
          }
    

    Моя проблема связана с word-wrap:break-word;. Это разрыв слов в середине слова. Но мне нужно, чтобы слова оставались такими, какие они есть, и чтобы документ был достаточно умным, чтобы разорвать линию, когда это необходимо, и сохранить сами слова нетронутыми.

    Это возможно? Я пробовал все варианты word-wrap, но ничего не работает. Либо абзацы не разрываются, и текст остается за пределами экрана, либо слова разрываются, и пара букв находится в одной строке, а другие буквы находятся в следующей строке.

    РЕДАКТИРОВАТЬ: добавление моего кода для создания конкретного примера. Весь мой элемент style:

    <style type="text/css">
        p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular}
        p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular; min-height: 12.0px}
    
    div {
        width: 300px;
        color:white;
        font-size:10px;
        word-wrap:break-word;
    }
    
    pre {white-space:break;}
    
    </style>
    

    Затем в элементе body:

    <body bgcolor="#1fa0e2">
    <p>
    <div>
    <bdo dir="rtl">
    <pre>
        דירת 3 חדרים ברחוב ארתור רובינשטיין בתל אביב הוצעה באחרונה למכירה ב–2.5 מיליון שקל, ובסופו של דבר נמכרה ב–2.195 מיליון בלבד - פער של 12% בין המחיר המבוקש למחיר המכירה. בירושלים, דירת 4 חדרים ברחוב צביה יצחק הוצעה למכירה ב–1.6 מיליון שקל ונמכרה ב–40% פחות - 950 אלף שקל בלבד.
    
    </pre>
    </div>
    </bdo>
    <span> </span></p>
    
    </body>
    </html>
    

    34

    Eddy 1 Май 2014 в 14:42

    4 ответа

    Лучший ответ

    Ничего особенного делать не нужно. Обычно текст разбивается между словами.

    Если этого не произойдет, тогда

    1. либо емкость слишком широкая
    2. контейнер явно настроен так, чтобы вообще не разбиваться на пробелы. Например, если это элемент <pre> или имеет css white-space:pre; или white-space:nowrap;.
    3. текст содержит неразрывные пробелы (&nbsp;) вместо обычных.

    Решение: использовать

    white-space: pre-wrap;
    

    Это заставит элемент вести себя как элемент pre, за исключением того, что он также переносится, когда строка слишком длинная. Смотрите также: http://css-tricks.com/almanac/properties/w/whitespace/ а>

    41

    GolezTrol 1 Май 2014 в 10:52

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

    Итак, решение вашей проблемы в CSS:

    pre{
        white-space: pre-wrap;
        word-break: keep-all; /*this stops the word breaking*/
    }
    

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

    29

    davidjohnclarke 21 Окт 2015 в 09:59

    Вы можете заключить слово в тег <span> и добавить либо white-space: nowrap, либо display: inline-block.

    4

    JAT86 6 Мар 2018 в 00:51

    Примечание :: Убедитесь, что ваши данные не похожи на … word&nbsp;word&nbsp;word или другие браузеры, кроме Chrome, думают, что это одно слово

    Звучит безумно, но ошибка в мобильном приложении нашей компании делала это, и пока я не проверил наши данные API, я думал, что Интернет сломался: p

    1

    Lux.Capacitor 16 Дек 2016 в 01:07

    Свойство CSS переноса слов и как его использовать

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

    Свойство, о котором я говорю, — это свойство CSS word-wrap (также упоминаемое в современной спецификации как overflow-wrap ), и, хотите верьте, хотите нет, оно работает во всех браузерах, включая все версии старый ИЕ. Фактически, он даже поддерживался еще в IE5.

    Что такое синтаксис?

    Свойство word-wrap принимает два значения, одно из которых используется по умолчанию:

     .селектор {
      перенос слов: нормальный; /* по умолчанию */
    }
    
    .селектор-2 {
      перенос слов: прерывание слова;
    }
     

    Довольно просто и очень практично, если вы понимаете, что он делает.

    Что он делает?

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

    Например, у вас может быть ширина 200 пикселей для определенного элемента, и у вас может быть ссылка внутри этого элемента, которая содержит очень длинное слово, выходящее за пределы ширины элемента (то есть оно длиннее 200 пикселей без пробелов). . Если у вас для свойства word-wrap установлено значение «break-word», то слово будет естественным образом переноситься на следующую строку, не нарушая разметку.

    Ниже приведена интерактивная демонстрация CodePen, которая позволяет переключать объявление word-wrap:break-word , чтобы вы могли увидеть, как макет выглядит без него, а затем с ним.

    См. интерактивный пример Pen
    , демонстрирующий использование переноса слов в CSS от Louis Lazaris (@impressivewebs)
    на CodePen.

    Какая от него практическая польза?

    Теоретически в комментариях к блогу люди могут испортить ваш блог, опубликовав длинные строки текста. Я видел, как это происходит, и это выглядит уродливо. Иногда это может происходить из-за того, что люди размещают длинные ссылки, которые не прерываются (хотя, похоже, это решается с помощью свойства пробела). Вы можете предотвратить этот вид вандализма, применив свойство word-wrap:break-word к разделу комментариев вашего блога.

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

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

    CSS — перенос переполнения, перенос слов, разрыв слов, сводка использования пробелов

    Пример

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

      <стиль>
        дел {
          ширина: 80 пикселей;
          фон: желто-зеленый;
        }
    
    <дел>
        хорошо ojbkkkkkkkk аа
      
    Эффект

    :

    Как видите, по умолчанию есть две вещи, на которые следует обратить внимание
    1.В строке, когда последнее слово не может быть проставлено полностью, слово будет помещено на следующую строку
    2. Если в строке только одно слово и длина слова превысила длину контейнера, буквы в конце слова будут только переполнять контейнер и не будут помещены на следующую строку

    Эти два явления иногда не то, что нам нужно, особенно второе явление

    перенос переполнения, перенос слов

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

    .
    значение описать
    обычный В месте переноса допускается только разрыв строки. Значение по умолчанию —
    ключевое слово Разрешить разрывы строк внутри длинных слов или URL-адресов

    Добавить переполнение стиля Wrap: break word

      <стиль>
        дел {
          ширина: 80 пикселей;
          фон: желто-зеленый;
          overflow-wrap: break-word;
        }
      

    эффект:

    1.Так как ojbk расположен после nice (описание ojbk ниже опущено), ojbk будет трудно полностью пройти с nice, поэтому перевод строки сразу после nice позволяет отображать ojbk на следующей строке.
    2. Ширина ojbk больше, чем ширина контейнера, и следующие K могут отображаться только до следующей строки
    3. Аа можно все это поставить на третью строку

    Делается вывод, что:
    Overflow Wrap: роль прерывающего слова
    1. Если последнее слово в строке не может быть проставлено полностью, поместите все слово сразу на следующую строку
    2.Если ширина слова больше ширины контейнера, в следующей строке ставить лишние буквы

    разрыв слова

    значение описать
    обычный Использовать правило разрыва строки браузера по умолчанию.
    универсальный Разрешить разрывы строк внутри слов.
    хранить все Вы можете переносить пробелы или дефисы только половинной ширины.

    Добавить стиль разрыва слов: разбить все

      <стиль>
        дел {
          ширина: 80 пикселей;
          фон: желто-зеленый;
          overflow-wrap: break-word; // Это не написано
          слово-разрыв: разбить все;
        }
      

    эффект:

    Видно, что nice и ojbk равноправны, а лишние буквы ojbk размещены во второй строке
    Делается вывод, что:
    Word break: роль break all
    1.Если последнее слово в строке не может быть прописано полностью, лишние буквы проставляются на следующей строке

    Когда значение разрыва слова равно Сохранить все
    Перенос слов в тексте CJK (китайский/японский/корейский) не допускается, но только через пробелы или дефисы половинной ширины.
    Поскольку здесь необходимо заменить язык CJK, для демонстрации эффекта используется новый пример

      <стиль>
        дел {
          ширина: 80 пикселей;
          фон: желто-зеленый;
        }
    
    <дел>
        Я ты его, я ты его
      


    Вы можете видеть, что по умолчанию действует аналогичный эффект разрыва слов: сломать все.На самом деле, слова break: break all и overflow Wrap: break word предназначены для языков, отличных от CJK, а word break: keep all — для языков CJK.

    Добавить разрыв слова стиля: сохранить все

      <стиль>
        дел {
          ширина: 80 пикселей;
          фон: желто-зеленый;
          Word-break: сохранить все;
        }
      


    Запятая ставится на новую строку, а второе «я, ты и он» ставится на вторую строку
    Делается вывод, что:
    Разрывное слово: роль сохранить все
    1.Стандарт разрыва предложений основан на пунктуации. Эффект аналогичен переполнению Wrap: break word, но для разных языков

    Приоритет переноса переполнения и разрыва слов

    Хотя в стандартном определении перенос по переполнению определяет, разрешено ли прерывание предложения, а разрыв слов определяет, как разрешен разрыв предложения, из приведенного выше примера очевидно, что перенос по переполнению также играет роль в разрыве предложения.

    Так какой из двух приоритетнее? Рассмотрим следующую практику.
    1. Когда разрыв слова не является разрывом всего, переполнение Wrap: слово разрыва будет играть свою собственную роль разрыва предложения.
    2. Когда слово break установлено в break all, overflow Wrap: break word не будет играть свою собственную роль в качестве разрыва предложений.
    3. Разрыв слова: сохранить все предназначен только для языка CJK и не обсуждается
    То есть для языков, отличных от CJK, разрыв слова имеет приоритет над переносом переполнения

    пробел

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

    значение описать
    обычный По умолчанию.Браузер игнорирует пробелы.
    до Пусто будет сохранено браузером. Он ведет себя как тег
     в HTML. 
    сейчас Текст не переносится, и текст продолжается на той же строке, пока не встретится.
    До метки.
    предварительная упаковка Последовательность пробелов сохраняется, но разрывы строк выполняются нормально.
    предварительный Объединяет последовательности пробелов, но сохраняет разрывы строк.
    унаследовать Указывает, что значение атрибута пробела должно быть унаследовано от родительского элемента.

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

    резюме

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

    Есть ли кто-нибудь, как я, задающийся вопросом, почему бы прямо не определить новое значение атрибута в разрыве слова, которое может воспроизводить эффект переполнения Wrap: break word? Атрибут переноса переполнения не нужен? Я считаю, что многие люди ослеплены этими двумя атрибутами.
    Странно, что разрыв слова имеет в стандарте только три значения атрибута. При входе в хром обнаруживается, что есть значение break word, и эффект тот же, что и при переполнении: break word.

    Более того, почему функция разрыва предложений языка CJK и языка, отличного от CJK, помещается в один и тот же атрибут (разрыв слова).Если установлено слово break: сохранить все, нельзя установить слово break: разорвать все одновременно? Язык CJK и язык, отличный от CJK, не должны конфликтовать.

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

    справочные ресурсы

    https://www.cnblogs.com/yingz…
    https://www.jianshu.com/p/53d

    Общий прогресс

    Добро пожаловать, лайкайте, обращайте внимание, собирайте и делитесь
    Если в статье есть ошибки или упущения, исправьте их в комментариях
    ฅ(`・ω・´)ฅ

    Свойство переноса слов CSS3


    Пример

    Разрешить перенос длинных слов на следующую строку:

    п.test {
        word-wrap: break-word;
    }

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

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

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

    Значение по умолчанию: обычный
    Унаследовано: да
    Анимация: №. Читать о анимированном
    Версия: CSS3
    Синтаксис JavaScript: объект .style.wordWrap="разрыв-слово" Попробуй это

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

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

    Недвижимость
    перенос слов 4,0 12,0 5,5 3.5 3.1 10,5

    Синтаксис CSS

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

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

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

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

    Учебник по CSS3: Текстовые эффекты CSS3


    Работа с длинными словами в CSS

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

    Демо

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

    Дефис #

    Первое решение для длинных слов — использование дефисов.

    Демо

      .hyphens { 
    -webkit-hyphens: auto;
    -moz-дефис: авто;
    -мс-дефис: авто;
    дефисов: авто;
    }

    Поддержка браузеров: Расстановка переносов в CSS поддерживается во всех основных браузерах, за исключением всех браузеров на основе мерцания (Chrome, Opera, Android) — ошибка Chromium.Я также протестировал Safari 5.1 для Windows, где добавлены дефисы, но в моих тестовых словах все они были в неправильном положении и не имели смысла.

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

    Вы также можете использовать библиотеку JavaScript, такую ​​как Hyphenator.js, которая работает со многими языками и во многих браузерах. Недостатком является то, что вам придется загружать много дополнительного JavaScript, и особенно для более длинного текста это снизит производительность.

    слово-разрыв #

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

    Демо

      .word-break { 
    -ms-word-break: break-all;
    слово-разрыв: разбить все;
    слово-разрыв: слово-разрыв;
    }

    Поддержка браузеров: Разделение слов в CSS поддерживается во всех браузерах, кроме Opera Mini и старых браузеров Opera на базе Presto.Я также обнаружил некоторые ошибки при использовании разрыва слов в сочетании с дефисами — об этом позже.

    Переливная пленка #

    Следующее решение использует перенос слов (overflow-wrap), еще одно свойство, определяющее, может ли браузер разрывать строки внутри слов.

    Демо

      .word-wrap { 
    word-wrap: break-word;
    overflow-wrap: слово прерывания;
    }

    Поддержка браузеров: CSS overflow-wrap поддерживается в каждом браузере (по крайней мере, во всех, которые я протестировал и перечислил в разделе Могу ли я использовать).Примечание. Для работы некоторых браузеров требуется устаревшее имя «word-wrap» (а не «overflow-wrap»).

    Многоточие #

    Другим способом обработки длинных слов является усечение.

    Демо

      .ellipsis { 
    переполнение: скрыто;
    пробел: nowrap;
    переполнение текста: многоточие;
    }

    Поддержка браузеров: Text-overflow поддерживается всеми основными браузерами.

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

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

    Заключение №

    Я протестировал все приведенные выше примеры и их комбинации в IE7, IE8, IE9, IE10, IE11, Edge, Firefox 39 (Windows, Linux, Mac), Chrome 44 (Windows, Linux, Mac), Opera 30 (Windows, Mac ), Safari 8 (Mac), Safari 5.1 (Windows), Android 5 (Nexus 6), Android 4.4 (Nexus 5), Android 2.3 (Galaxy S2), iOS 8.3 (iPhone 6), iOS 7 (iPhone 5S), iOS 6 (iPhone5), Opera Mini (Android 5), Opera Classic (Android 5), Opera Mobile (Android 5) и Windows Phone 8.1 (Lumia 930) с использованием реальных устройств и BrowserStack — вот список всех 26 браузеров и их результаты.

    При поиске в Интернете вы, вероятно, найдете следующее решение:

      .hyphenate { 
    -ms-word-break: break-all;
    слово-разрыв: разбить все;
    слово-разрыв: слово-разрыв;

    -webkit-дефисы: авто;
    -moz-дефис: авто;
    дефисов: авто;
    }

    Хотя в большинстве случаев это отлично работает, я обнаружил, что в Firefox дефисы не будут работать (хотя и поддерживаются) в сочетании с разрывом слов.Кроме того, поскольку в Opera Mini не поддерживается перенос слов, он там работать не будет.

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

    Окончательное решение #

      .hyphenate { 
    overflow-wrap: break-word;
    перенос слов: перенос слова;
    -webkit-дефисы: авто;
    -мс-дефис: авто;
    -moz-дефис: авто;
    дефисов: авто;
    }

    Это решение будет отображать дефисы для каждого поддерживающего его браузера и разбивать строки во всех остальных браузерах — идеально.Хотя я протестировал это решение в 26 различных браузерах, я все еще не уверен, что оно будет работать на 100% — если вы обнаружите какой-либо крайний случай, сообщите мне об этом.

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

    Word Wrap не работает (другие решения не работают)

    Модератор т-р

    (@т-п)

    Это может быть конфликт плагина или темы. Попробуйте отключить все плагины и используйте одну из тем по умолчанию (Twenty*). Если проблема исчезнет, ​​включите их один за другим, чтобы определить источник ваших проблем.

    Если вы можете установить плагины, установите «Проверку работоспособности»: https://wordpress.org/plugins/health-check/ На вкладке устранения неполадок вы можете нажать кнопку, чтобы отключить все плагины и изменить тему для вас, в то время как вы вы все еще вошли в систему, , не затрагивая обычных посетителей вашего сайта .

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

      #контент {
    слово-разрыв: разбить все;
    }  

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

      #контент {
    разрыв слова: нормальный;
    }  

    И снова слова разрываются посередине, а не между словами.Я попытался повторно добавить CSS, но безуспешно.

    Может кто подскажет? Обратите внимание, что я полный новичок, когда дело доходит до плагинов и JetPack, поэтому мне понадобятся некоторые инструкции типа n00b.

    Я был бы очень признателен за вашу помощь снова.

    Большое спасибо.

    Сейчас я не вижу этого на вашем сайте. Можете ли вы привести пример страницы, на которой это происходит?

    И… вам не нужно повторно вводить CSS, если только вы или какая-либо часть вашего сайта не удалили его по какой-либо причине.

    На главной странице он отображается в разделе «последние сообщения». Центральная колонка.

    Унаследована неправильная настройка из другой области. Поскольку он не является частью блока #content, он не подчиняется тем же правилам.

    Сюда нужно добавить:

      #контент,
    #левая колонка {
        разрыв слова: нормальный;
    }  

    word-wrap CSS собственность | ЗОНА CSS

    Определение CSS

    переноса слов .

    Собственность CSS Word-Wrap permet de sécifier que le navigationur peut rompre un mot afin d'éviter les débordements de l'element .

    Пример синтаксиса CSS перенос слов :
       перенос слов  : перенос слов;
      перенос слов  : нормальный;  

    La Propriété de Feuille de Style Word-Wrap CSS Peat Peat Pendre Un Valeur:

    • Нормальный : Ne Coupe Jamais un Mot, Valeur Par Défaut.
    • break-word : Force le retour à la ligne en coupant les/le mot d’une façon арбитраж, s’il n’y a pas d’autre possibilité.

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

    Условия применения CSS

    переноса слов .

    Собственность стиля Word-Wrap CSS применим к ансамблю HTML или XHTML.

    Наследие доблестей Css de

    word-wrap .

    Свойство стиля word-wrap CSS является наследием родителя.

    Проблема интерпретации

    word-wrap en Css.

    La Propriété CSS word-wrap peut poser des problèmes d’interpretation dans le sens ou les mots peuvent être coupés de façons différentes.
    Собственный стиль перенос слов CSS n’est pas reconnue par Opéra < 10.5 и Firefox < 3.5. .

    Как сделать, чтобы текст не переносился в CSS? – Rampfesthudson.com

    Как сделать так, чтобы текст не переносился в CSS?

    Если вы хотите, чтобы текст не переносился, вы можете применить white-space: nowrap; Обратите внимание, что в примере HTML-кода в верхней части этой статьи на самом деле есть два разрыва строки, один перед строкой текста и один после, что позволяет тексту находиться на отдельной строке (в коде).

    Что такое перенос в CSS?

    white-space — это свойство CSS, которое помогает контролировать, как обрабатываются пробелы и разрывы строк в тексте элемента. nowrap: несколько пробелов свернуты в один, но текст не переносится на следующую строку. Мы уже обсуждали, как использовать значение nowrap для предотвращения разрывов строк.

    Как сделать так, чтобы текст не переносился?

    Установка следующих свойств css: text-overflow: многоточие; пробел: nowrap; переполнение: скрыто; Это заставит текст больше не переполняться, но многоточие не применяется.

    Как разбить длинный текст в CSS?

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

    Как запретить ячейкам таблицы перенос текста?

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

    Как предотвратить обтекание изображения текстом в CSS?

    Вам придется поместить текст в отдельный контейнер. Поскольку ваш плавает влево, вы можете использовать overflow: hidden в своем недавно добавленном контейнере, чтобы избежать переноса текста.

    Что такое без обертки?

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

    Что такое текст без переноса?

    сейчас. Последовательности пробелов будут свернуты в один пробел. Текст никогда не будет переноситься на следующую строку. Текст продолжается на той же строке, пока не встретится тег.

    Что такое обтекание CSS?

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

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

    .

    Добавить комментарий

    Ваш адрес email не будет опубликован.