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

Как запретить перенос слов 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+

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

Версии CSS

Описание

Свойство 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 и так далее):

Пример .

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

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

Содержание

• 1 Зачем переносить «непереносимое»
  • 1.1 Решаем проблему переноса слов с помощью HTML
  • 1.2 Перенос слов средствами CSS
  • 1.3 Запрет переноса слов
• 2 Как сделать или запретить перенос строки: HTML код и тег
  • 2.1 Все о теге для переноса строки br
  • 2.2 Зачем придумали тег br?
  • 2.3 Бонус — br clear
  • 2.4 БОНУС — тег-разделитель hr
  • 2.5 БОНУС — запрет переноса на новую строку с тегом nobr
  • 2.6 Итоги — использование br, nobr, hr, p в HTML
• 3 Как запретить перенос текста? | WebReference
  • 3.1 Автор и редакторы
• 4 white-space | htmlbook.ru
  • • 4.0.1 Краткая информация
    • 4.0.2 Версии CSS
    • 4.0.3 Описание
    • 4. 0.4 Объектная модель
    • 4.0.5 Браузеры
• 5 html — Запретить переносы строк
  • • 5.0.1 текущее сообщество
• 6 Как запретить перенос слов CSS?
• 7 Как сделать перенос строки в тексте в HTML?
  • 7.1 Первый вариант переноса строк в HTML
  • 7.2 Второй вариант переноса строк в HTML
  • 7.3 Третий вариант переноса строк в HTML
• 8 Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens) — Примеры
  • • 8.0.1 В чём состоит различие одно свойства от другого
  • 8.1 Не переносить слова на другую строку
  • 8.2 Краткая информация
  • 8.3 Версии CSS
  • 8.4 Описание
  • 8.5 Объектная модель
  • 8.6 Браузеры
  • 8.7 Рекомендуем к прочтению

Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но с переносом слов 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

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

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

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

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

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

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

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

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

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

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

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

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

white-space | htmlbook.ru

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

Версии 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

Описание

Свойство 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 — Русские Блоги

повернуть:http://www.zhiwenweb.cn/Category/Website/1086.html

Обтекание текстового содержимого CSS control: различие и использование переноса слов, переноса слова, пробела, переполнения текста

В div часто появляется текстовый макет, а разрывы строк сбивают с толку.
Мы часто сталкиваемся со следующими проблемами:
1. Если это полностью английская строка символов без каких-либо символов (включая пробелы) в середине, она не будет переноситься автоматически;
2. Если и китайский, и английский языки смешаны, перевод строки происходит в начале строки на английском языке (длина на английском языке> длина div) и в конце строки не переносятся;

Приведенные выше несколько атрибутов css могут помочь нам координировать и решать эти проблемы.
Простое введение в использование каждой функции:

word-wrap: normal | break-word; (перенос содержимого)
                   normal: значение атрибута по умолчанию (позволяет содержимому превышать указанную границу контейнера). 
                   break-word: содержимое будет перенесено в границу (английское слово не усекается для переноса, а атрибут под английским словом усекается, чтобы иметь эту функцию. )  

 word-break: normal | break-all | keep-all (новая строка в слове)
                       нормальный: если это китайский, он будет переносить китайские символы на границе. Если это английский, все слово будет перенесено. Примечание. Если длина английской строки превышает границу, следующая часть откроет границу. граница является фиксированным атрибутом, тогда ее задняя часть отображаться не будет. 
                       break-all: принудительно разорвать все строки, английские слова будут обрезаны 
                       keep-all: запретить разрывы слов. Если это китайский, он будет переносить фразу китайских символов в передние и задние знаки препинания, а английское слово также будет переносить всю строку. Примечание: если определенная длина английской строки превышает границу, следующая часть будет растягивать границу .Если граница является фиксированным атрибутом, последняя часть отображаться не будет. 

text-overflow: clip | многоточие (переполнение текста)
                           clip: не отображает знак пропуска (.  ..), а просто обрезает
                           многоточие: когда текст в объекте выходит за пределы (больше, чем часть ширины), отображается знак многоточия (...)

white-space: normal | pre | nowrap (содержимое не переносится)
 по умолчанию - нормальный. Браузер игнорирует пробелы. 
 Предварительный пробел будет зарезервирован браузером. Его поведение аналогично тегу <pre> в HTML. 
 Текст Nowrap не переносится, и текст будет продолжаться в той же строке, пока не встретит тег <br>. 
 (Поместите таблицу в слой, если слой float: none, между таблицей и слоем будет промежуток. Решение этой проблемы - добавить white-space: nowrap к стилю слоя)

Использование: word-break: break-all;
 В целом: 
.body{ 
       word-wrap:break-word; 
       word-break:keep-all; 
       overflow:hidden; 
} 
.css{
      text-overflow:ellipsis;
      white-space:nowrap;
      overflow:hidden;
}

 
IE и Firefox рассматривают его как длинное слово, поэтому оно не переносится автоматически. К
Для IE вы можете использовать проприетарное свойство CSS IE word-wrap для автоматического переноса строк: word-wrap: break-word;

Для Firefox стандарт CSS2 не определяет атрибуты, подобные переносу слов, и часть поддержки может быть скрыта с помощью атрибута переполнения: overflow: hidden

Анализ различий:

И word-break: break-all, и word-wrap: break-word могут автоматически переносить содержимое своего контейнера, например DIV. Разница между ними заключается в следующем:

1. word-break: break-all Например, если div имеет ширину 200 пикселей, его содержимое будет автоматически перенесено на 200 пикселей. Если в конце строки есть длинное английское слово (поздравление и т. Д.), Оно будет вырезано от слова и становится концом строки. Это conra (начальная часть поздравления), а следующая строка — конечная часть tulation (конгуатуляция).

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

3. Word-break; break-all Поддерживаемая версия: IE5 и выше. Это поведение аналогично обычному для азиатских языков. Также разрешен разрыв в любом слове в текстовых строках неазиатских языков. Это значение подходит для азиатского текста, содержащего неазиатский текст. WORD-WRAP: break-word Поддерживаемая версия: IE5.5 и выше. Содержимое будет перенесено в границы. При необходимости также произойдет разрыв слова. Стол автоматически оборачивается, чтобы не растекаться. word-break: normal | break-all | keep-all Параметры: normal: В соответствии с текстовыми правилами азиатских и неазиатских языков, разрывы строк внутри слов разрешены. Break-all: это поведение такое же, как и в азиатских языках. языков. Также разрешен разрыв в любом слове в текстовых строках неазиатских языков. Это значение подходит для азиатского текста, содержащего неазиатский текст. Keep-all: то же самое, что и обычно для всех неазиатских языков. Для китайского, корейского и японского языков разрывы слов не допускаются. Подходит для неазиатского текста, который содержит небольшое количество азиатского текста. Синтаксис: word-wrap: normal | break-word Параметры: normal: разрешить содержимому превышать указанную границу контейнера. Break-word: содержимое будет переноситься внутри границы. . При необходимости также может произойти разрыв слова.Описание: установка или получение прерывания и переключения, когда текущая строка превышает границу указанного контейнера.

Соответствующая функция скрипта — wordWrap. Пожалуйста, обратитесь к другим библиографиям, которые я написал. Синтаксис: table-layout: auto | fixed Параметры: auto: автоматический алгоритм по умолчанию. Макет будет основан на содержимом каждой ячейки. Таблица будет отображаться после чтения и вычисления каждой ячейки. Очень медленно исправлено: исправлен алгоритм верстки. В этом алгоритме горизонтальный макет основан только на ширине таблицы, ширине границы таблицы, расстоянии между ячейками и ширине столбца и не имеет ничего общего с содержимым таблицы. Описание: Установить или получить алгоритм компоновки таблицы. Соответствующая функция скрипта — tableLayout.

личное мнение:Word-break покажет проблему с обнаружением 3C, этот атрибут браузер OPERA FIREFOX не поддерживает. Атрибут word-break можно заменить на white-space: normal;, чтобы его можно было правильно изменить в FireFox и IE, и следует отметить, что пробелы между словами не могут быть заменены или они не могут быть изменены правильно.

html — Как сделать так, чтобы текст не занимал более 1 строки?

Спросил 13 лет, 7 месяцев назад

Изменено 1 год, 3 месяца назад

Просмотрено 311k раз

Есть ли перенос слов или любой другой атрибут, который предотвращает перенос текста? У меня высота и переполнение: скрытый , а текст все равно рвется.

Должен работать во всех браузерах, до CSS3.

• html
• css
• текст
• перенос слов

 div {
  пробел: nowrap;
  переполнение: скрыто;
} 

 
тестирование довольно большого количества текста, который просто не переносится, потому что это слишком длинное предложение с таким количеством бесполезных слов, что вы не сможете его прочитать сегодня, несмотря на все усилия, которые вы прилагаете для этого, включая растяжение вашего ширину браузера до максимальной длины, если, однако, вы не использовали функцию уменьшения масштаба вашего браузера или вручную не модифицировали CSS, и в этом случае вы определенно жульничаете и портите эту забавную маленькую игру, в которой я печатаю столько слов, сколько может уместиться в один смехотворно длинный пробег- по предложению двадцать первого века anno domini, используя свою традиционную клавиатуру и два монитора с разрешением 1080p, прилагая все усилия, чтобы кропотливо болтать снова и снова, но просто не повторяя себя точно, за исключением повторного использования пары слов в нескольких местах в этом HTML даже хотя это было бы примерно в тысячу раз легче, чем то, что я сейчас делаю в этот день, бессмысленно избегать работы, несмотря на ее бесполезность, учитывая, что это только создаст последствия для моего Я должен работать усерднее, чтобы наверстать упущенное позже, конечно, все эти усилия модерации, направленные на то, чтобы смягчить мои обширные усилия, чтобы сделать это несколько приятным для чтения, делая его как можно длиннее, кто может или не может отменить это редактирование, несмотря на его полезность, так как предыдущее редактирование содержало только четыре слова, которые невозможно было обернуть даже без изменений CSS из-за их краткости, которая неизменно будет создавать больше вопросов, чем ответов, таких как можно найти в разделе комментариев, именно поэтому я создал это усилие для решения одной из задач, связанных с назначением атрибута переполнения, который, если вы его изменили, теперь вы увидите, позволяет вам прочитать весь этот текст благодаря преимуществам функций горизонтальной прокрутки, но, с другой стороны, если бы использовалось только переполнение и text-wrap был опущен, вы по-прежнему будете видеть вертикальную полосу прокрутки, если вы не установите фиксированную высоту для этого div, и в этом случае вы, безусловно, должны увидеть этот verti переполнение cal скрыто, хотя это могло бы произойти только в том случае, если бы вы не поместили этот пример в полноэкранный режим, за исключением того, что ваш видовой экран установлен на достаточно маленькую высоту, которая на самом деле может быть дополнительно определена до указанного количества строк, а не одной, используя набор высоты к кратному свойству CSS, определяемому высотой строки, которое может быть процентом пробела, и это действительно скроет вертикальное переполнение этой горы текста, что я действительно очень удивлен, что вам удалось задержаться здесь, чтобы прочитать через его легкомысленный характер на знаменитом сайте, известном программистам как Stack Overflow, и за это я поздравляю вас с потенциальной тратой вашего времени
 

Примечание: работает только с блочными элементами. Если вам нужно сделать это для ячеек таблицы (например), вам нужно поместить div внутри ячейки таблицы, так как ячейки таблицы отображают ячейку таблицы, а не блокируют.

Начиная с CSS3, это поддерживается и для ячеек таблицы.

5

Для этого можно использовать свойство CSS white-space .

 пробел: nowrap;
 

Использование переполнения текста : многоточие добавит … в конце.

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

1

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

1

Чтобы быть предельно ясным, это прекрасно работает с абзацами, заголовками и т. д. Вам просто нужно указать display: block .

Например:

 

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

 

(простите встроенные стили)

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

CSS без разрыва строки

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

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

Чтобы реализовать свойство CSS без разрыва строки, необходимо знать основы HTML и CSS. Мы будем использовать текстовый редактор для кода и браузер для реализации кода в редакторе. Давайте подробнее остановимся на CSS-свойстве inline-block и его влиянии на явление «без разрыва строки».

Свойство встроенного блока CSS

Это свойство используется для отображения элемента в контейнере встроенного блока. В этом подходе блок элементов преобразуется во встроенный элемент. Таким образом предотвращается разрыв строки. Синтаксис свойства встроенного блока отображается следующим образом:

Элемент {
    display: встроенный блок;
}

Мы реализуем это свойство двумя способами: через список и через div.

Пример 1: Нет разрыва строки в списках

В первом примере мы применим к списку концепцию отсутствия разрыва строки. Список — это HTML-контент, в котором текст представлен вертикально вместе с маркерами, упорядоченный или неупорядоченный список. Когда мы говорим о списках, мы всегда приходим к выводу, что каждый элемент списка находится в отдельной строке с разрывом строки. Но иногда по сценарию мы хотим вывести элементы списка без маркеров в одну строку. Это делается путем отображения элементов списка с помощью CSS со свойством «без разрыва строки». Давайте начнем HTML-код с раздела body.

Мы использовали два заголовка текста через теги заголовков –

и

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

• Компьютерная сеть


• . .

Тот же синтаксис используется для ввода 5 элементов в каждой строке.

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

Li {
 отображение: встроенный блок;
 }

Мы используем тег «li» непосредственно в CSS, чтобы применить эффект встроенного блока ко всем элементам списка и предотвратить их отображение в отдельной строке. Кроме того, мы применяем цвет шрифта к обоим заголовкам. Это дополнительный стиль, который не является обязательным для использования.

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

 Body {
Ширина: 60 %;
}

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

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

Пример 2: Нет разрывов строк в Div

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

То же самое касается второго div.

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

Всякий раз, когда в HTML используется div или таблица, они оба располагаются один за другим в вертикальном направлении, как мы представили. Это связано с тем, что HTML генерирует автоматический интервал, следуя значению отступа, примененному пользователем, чтобы удерживать их в одной строке. Используя феномен «без разрыва строки», мы претерпеваем некоторые изменения в коде.

Во-первых, мы применяем свойство display со свойством inline-block к обоим элементам div в CSS.

Div {
Отображение: встроенный блок;
}

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

Корпус {
Ширина: 30%;
 }

После выполнения вы увидите, что два объявленных нами блока div использовали CSS-свойство display «без разрыва строки».

Дополнительные способы:

Некоторая дополнительная информация, касающаяся свойства «без разрыва строки», передается через теги HTML без использования тегов CSS отдельно.

Один из способов — использовать строку &#160. Использование этой строки между двумя строками вызывает пробел, заставляя их оставаться на одной строке вместо использования тега
, который ведет к следующей строке. Оператор and(&) используется для привязки.

123&#160

Другой способ пробела между двумя строками заключается в том, что HTML использует встроенную функцию «nbsp» или «неразрывный пробел». Мы используем nbsp между двумя числами. В результатах будет пробел.

456&nbsp

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

Заключение

В статье CSS «без разрыва строки» объясняется использование свойств CSS и HTML, отличных от эффекта разрыва, который применяется с помощью HTML-тега разрыва
. В начале мы дали простое введение в HTML и CSS. Свойство, которое в основном отвечает за эффект «без разрыва строки», объясняется как свойство отображения встроенного блока. Мы объяснили использование отображения встроенных блоков в списках HTML и контейнерах div на примерах. Кроме того, добавлена ​​некоторая дополнительная информация по этой теме.

Подходы к разрыву строки

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

Разрыв строки часто предшествует выравниванию текста. Аналогичное обобщенное описание подходов к обоснованию см. в разделе Подходы к полному обоснованию.

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

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

Основные параметры

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

1. разделяются ли в тексте «слова» или слоги, и если да, то как, и
2. независимо от того, переносит ли система письма слова, слоги или символы на следующую строку.

Что такое слово?

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

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

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

• слов в финском языке могут заканчиваться несколькими предложными или другими суффиксами, присоединенными к основному слову (talo означает «дом», а talostani означает «из моего дома»),
• слов в немецком языке могут быть составными, состоящими из последовательности более мелких слов, таких как Eingabeverarbeitungsfunktionen, которое является составным словом Eingabe, Verarbeitung и Funktion, за которым следует маркер множественного числа,
• в арабском языке маленькие слова, такие как «и» (و), пишутся рядом со следующим словом без промежуточного пробела (например, الجامعات والكليات означает «университеты и колледжи», но есть только один пробел).

Когда «разделители слов» отсутствуют в таких языках, как кхмерский, тайский, японский и т. д., определение того, что составляет слово, может быть субъективным, когда речь идет о сложных существительных или грамматических частицах. Например, тайский перевод слова «письмо», การเขียน, может рассматриваться как одно слово (канхиан) или как два слова (кан кхиан).

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

Широкие типы

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

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

В архаичных письмах гораздо чаще используется подход scriptio continua (т. е. без разрывов слов или слогов), хотя в современных текстах, описывающих их, вы можете встретить пробелы, разделяющие единицы текста. Более старые версии упомянутых скриптов также могут использовать другие правила разделения слов и разрыва строк.

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

Языки, которые переносят слова

Слова, разделенные пробелами

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

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

Так работают многие скрипты. Среди прочего, они включают сценарии, используемые для всех основных европейских языков, включая кириллицу и греческий язык; сценарии, используемые для основных индийских языков, таких как деванагари, гуджарати и тамильский; шрифты, используемые для современных семитских языков, таких как арабский, иврит и сирийский; и сценарии, используемые для американских языков, таких как чероки и унифицированное канадское слоговое письмо (UCAS).

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

Однако текст на таких языках, как арабский, иврит или дивехи, значительно усложняется, если он содержит двунаправленный текст. Если мы заставим текст читать ‘…في this is English ذلك…’ в приведенном выше примере, мы получим следующее.

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

Вертикально расположенные слова в китайском, японском, корейском и традиционном монгольском переносятся вверх, но новая строка появляется слева для CJK и справа для монгольского.

Юго-Восточная Азия: без разделителя слов

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

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

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

В прошлом символ Unicode U+200B ZERO WIDTH SPACE (ZWSP) использовался для обозначения границ слов для этих скриптов, и некоторые стандартные клавиатуры, такие как кхмерская NIDA, по-прежнему генерируют ZWSP с помощью клавиши пробела, но в последнее время в основных языках есть строчные символы. ломая реализации в их распоряжении, что означает, что ZWSP не является существенным. Крупномасштабный ручной ввод ZWSP также не очень практичен, поскольку в большинстве случаев пользователь не видит разделитель; это приводит к проблемам с вставкой ZWSP в неправильное положение или несколько раз. Однако ZWSP можно использовать для ручного создания и исправления аспектов поведения разрыва строки.

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

Языки с переносом слогов

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

Обычно требуется некоторый анализ текста, чтобы определить, где проходят границы слогов. Часто конец слога обозначается конечным согласным, являющимся объединяющим знаком, или конец слога может обозначаться специальным знаком, однако в некоторых случаях расположение границ слога может быть визуально неоднозначным. Кроме того, рассматриваемый слог может быть орфографическим, а не фонетическим слогом (см. Ниже).

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

Тибетский: видимые разделители слогов

Хорошим примером системы письма, которая регулярно прерывается на границах слогов, является тибетский язык, в котором используется ་ [U+0F0B ТИБЕТСКИЙ ЗНАК МЕЖСЛОГОВЫЙ TSHEG] (произносится как tsek) для обозначения конца слога.

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

Корейский хангыль: альтернативы

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

Обтекание по слогам является распространенным явлением, особенно в полностью выровненном тексте (что чаще встречается в системах письма CJK , чем в западных), но абзацы с рваным правым краем часто переносят целые слова. Однако выбор мотивирован предпочтениями автора, а не какими-либо жесткими правилами.

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

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

Суданский, Восточный Чам: пробел в качестве разделителя слов

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

Еще из Юго-Восточной Азии: без разделителя слов

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

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

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

Символьная упаковка

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

Японский и вайский: обертывание на основе моры

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

Этот тип обертывания иногда называют слоговым, но на самом деле японский — это письменность, основанная на море, а не на слогах. Например, можно найти текст, состоящий из одного слога きょう (произносится как kyō, что означает «сегодня»).

Тем не менее, все (как всегда) не так просто. Хотя принято переносить последний из трех символов в слове きょう независимо друг от друга на следующую строку, некоторые авторы контента предпочитают всегда оставлять маленький второй символ с первым. CSS предоставляет строгие и свободные значения для свойства разрыва строки , чтобы позволить авторам контента контролировать это поведение. Последнее значение допускает разрывы строк между ними. Это часто может быть полезно для текста в узких колонках, таких как газеты.

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

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

Эфиопский: разделитель слов без пробела

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

Однако в эфиопском тексте также может использоваться традиционный символ пространства слов ፡ [U+1361 ETHIOPIC WORDSPACE] для обозначения границ слов. В этом случае эфиопский язык переносится после любого символа, если пробел не появляется в начале строки.

Разделители слов без пробелов также часто встречаются в архаичных шрифтах.

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

Дефис

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

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

Механизм расстановки переносов также различается. В некоторых языках дефис (который может не выглядеть как «-») появляется в начале следующей строки, в других — в обеих строках. В некоторых случаях написание слова меняется через дефис, например, в голландском cafeetje → cafe-tje и skiërs → ski-ers , а в венгерском Össeg → Ösz-01g.

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

Правила начала и конца строки

Пунктуация

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

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

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

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

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