Css перенос строк: Изучаем CSS — перенос слов

Есть ли какой-нибудь другой способ словесно обернуть текст внутри div? Я не могу использовать перенос слов в CSS, так как могу использовать только CSS1 и некоторые CSS2. *Use javascript или CSS…

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

У меня есть UITextView, на котором я хотел бы отключить перенос слов, но оставить перенос символов включенным. В принципе, я хотел бы иметь длинную строку 200+ символов, которая все еще обертывается…

Есть ли способ сделать перенос слов в элементе управления меткой .NET? Я знаю, что есть альтернативный способ с использованием TextBox , собственность BorderStyle нет, собственность ReadOnly true и…

В моей сетке extjs6 у меня есть заголовки столбцов, которые не помещаются в пространстве. Как сделать перенос слов только в заголовке столбца? Это то, что я пробовал и не работает. xtype: ‘grid’,…

Если я устанавливаю перенос слов на метку и помещаю ее в любой макет-перенос слов работает нормально, если я не ставлю метку на ScrollPane. Вот пример: @Override public void start(Stage…

Мне нужен перенос слов в моем css, и сразу же я получил эту ошибку: Validation (CSS 3.0): ‘word-wrap’ is not a known CSS property name. После некоторых исследований я обнаружил, что слово-wrap было…

Я пытаюсь понять, почему перенос слов не работает должным образом на этой странице для класса div: .gce-page-list http://metaphysicalerotica.com/events / Похоже, что тема добавила тег pre и code, и…

Мое значение Textbox-это более 20 слов. .customized { display: block !important; white-space: normal !important; word-wrap: break-word !important; word-break: break-all; width: 100px !important ; }…

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

word-break — CSS | MDN

Свойство CSS word-break определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока.

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

word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; 


word-break: inherit;
word-break: initial;
word-break: unset;

Свойство word-break определяется одним из описанных ниже ключевых слов.

Значения

normal

Поведение по умолчанию для расстановки перевода строк.

break-all

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

keep-all

Перевод строки не будет использован в тексте на китайском/японском/корейском языке. Для текста на других языках будет применено поведение по умолчанию ( normal).

break-word

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

Примечание: В отличие от word-break: break-word и overflow-wrap: break-word (смотри overflow-wrap), word-break: break-all вставит перевод строки в том месте, где текст будет превышать занимаемый им блок (даже в том случае, когда текст можно перенести по словам).

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

HTML

<p>1. <code>word-break: normal</code></p>
<p>This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

<p>2. <code>word-break: break-all</code></p>
<p>This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

<p>3. <code>word-break: keep-all</code></p>
<p>This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

<p>4. <code>word-break: break-word</code></p>
<p>This is a long and
  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> 
 

CSS

.narrow {
  padding: 5px;
  border: 1px solid;
  display: table;
  max-width: 100%;
}

.normal {
  word-break: normal;
}

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

.keepAll {
  word-break: keep-all;
}

.breakWord {
  word-break: break-word;
}

BCD tables only load in the browser

Переносы слов. Как сделать в css перенос слов, которые не влазят в блок? Css перенос длинной строки

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

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

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

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

Word-wrap: break-word;

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

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

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

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

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

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

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

Описание

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

обозначает предпочтительное место для переноса строки

Простой ответ — использовать символ пробела нулевой ширины. ​ Он используется для создания пробелов внутри слов в определенных точках .

Имеет ли полная противоположность в неразрывном пробеле   (ну, на самом деле слово-столяр ⁠ ) ( слово-краснодеревщик является нулевой шириной версии неразрывного пробела )

(есть также другие неразрывные коды, такие как неразрывный дефис ‑ ) (вот подробный ответ на различные «варианты» nbsp )

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

ctrl+ c, ctrl+ vпомогает

пример:

   Honey&nbsp;Nut&nbsp;Cheerios,<!---->&#8203;<!--
-->Wheat&nbsp;Chex,<!---->&#8203;<!--
-->Grape&#8209;Nuts,<!---->&#8203;<!--
-->Rice&nbsp;Krispies,<!---->&#8203;<!--
-->Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,<!---->&#8203;<!--
-->Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,<!---->&#8203;<!--
-->Wheaties,<!---->&#8203;<!--
-->Special&nbsp;K,<!---->&#8203;<!--
-->Froot&nbsp;Loops,<!---->&#8203;<!--
-->Apple&nbsp;Jacks

нечитаемый? это тот же HTML без тегов комментариев:

   Honey Nut Cheerios,​Wheat Chex,​Grape‑Nuts,​Rice Krispies,​Some random cereal with a very long name,​Honey Bunches of Oats,​Wheaties,​Special K,​Froot Loops,​Apple Jacks

Однако, поскольку рендеринг HTML в электронной почте не полностью стандартизирован, он хорош для такого рода использования, поскольку это решение не использует CSS / JS.

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

(примечание редакции 🙂

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

wrap — свойство css :: руководство cssdot.ru

Данное свойство не поддерживается

Свойство text-wrap определяет способ переноса и разрыва строк текста. Данной свойство может принимать одно из 4 значений:

• normal (нормальный режим) — в этом режиме, при необходимости, строки могут разрываться в стандартных позициях, определенных в спецификации Asmus Freytag. Line Breaking Properties. 29 March 2005. Unicode Standard Annex #14 (пробелы, перевод строки, знаки пунктуации, переносы и т.д.).
• none — в этом режиме перенос текста запрещен и если строка не помещается в родительский элемент, то она будет выходит за рамки контейнера или растягивать его до необхоимых размеров.
• unrestricted — в этом режиме разрыв и перенос строки возможен в любом месте и ограничения по разрыву строк не принимаются во внимание.
• suppress — в этом режиме приоритетными местами разрыва и переноса внутри строки считаются позиции стнури строки, но вне данного элемента. Если таких позиций нет, то место переноса будет выбрано с учетом правил нормального режима.

Независимо от установок свойства text-wrap, строки всегда будут переноситься в месте принудительных разрывов (см. спецификацию  Asmus Freytag. Line Breaking Properties. 29 March 2005. Unicode Standard Annex #14 )

Свойство text-wrap определено в спецификации CSS 3 модуль Text Level 3 (текст, уровень 3), применяется к всем элементам, и действует на всех визуальные носителях, его значение наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение normal. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

Краткое описание

Синтаксис:

normal | unrestricted | none | suppress | inherit

По умолчанию:

normal

Применяется к:

всем элементам

Наследование:

Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент].style.textWrap

Кроссбраузерная совместимость

Internet Explorer

Firefox

Chrome

Safari

Opera

Перенос на новую строку с помощью flexbox

От автора: вот проблема: если вы хотите создать макет с несколькими строками элементов, как вы можете контролировать во flexbox перенос элементов на новую строку?

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

Распространенным способом управления позиционированием и размером flex-элементов является использование width или flex-basic; если мы установим для четвертого элемента width 100%, он будет расположен в отдельной строке. Но что, если мы не хотим или не можем установить ширину отдельных элементов? Или есть ли способ просто указать flexbox разрыв строки в определенных точках?

Нет никакого свойства, которое мы могли бы установить для flex, чтобы оно переносило элементы на новую строку, но мы можем вставить перенос строки (вы можете представить это, как br) между двумя flex-элементами для достижения чего-то похожего:

/* Вставка разрыва строки между двумя flex-элементами заставит 
 * flex-элемент, который расположен после него переноситься на новую строку */
.break {
  flex-basis: 100%;
  height: 0;
}

<div>
  <div></div>
  <div></div> <!-- break -->
  <div></div>
</div>

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

Обратите внимание , что все примеры кода ниже, требуют и предполагают, что у вас есть контейнер с display: flex и flex-wrap: wrap и flex-элементы добавляются в этот контейнер:

.container {
  display: flex;
  flex-wrap: wrap;
}

<div>
  <div></div>
  <div></div>
  <div></div>
  ...
</div>

Вставка элемента разрыва

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

Давайте начнем с простого примера. Скажем, у нас есть два элемента, отображаемые рядом (они будут растягиваться с помощью flex-grow: 1, и для них не определены ни width, ни flex-basis):

Мы можем вставить элемент разрыва строки между элементами, чтобы они оба заняли 100% доступного пространства:

<div>...</div>
<div></div> <!-- перенос на новую строку -->
<div>...</div>

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

Как это работает? Так как мы указали, что .break должен занимать 100% ширины контейнера (потому что мы установили flex-basis: 100%), flex-элемент переноса должен размещаться в собственном ряду, чтобы достигнуть этого. Он не может размещаться в одном ряду с первым элементом, поэтому перейдет к новой строке, в результате чего первый элемент останется один в одной строке. Первый элемент будет растягиваться, чтобы заполнить оставшееся пространство (так как мы установили flex-grow: 1). Та же логика применима ко второму элементу.

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

<div>...</div>
<div>...</div>
<div>...</div>
<div></div> <!-- разрыв -->
<div>...</div>
<div></div> <!-- разрыв -->
<div>...</div>
<div>...</div>
<div>...</div>

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

Опять же, нам не нужно было указывать ширину ни для одного из этих элементов. Тот же самый метод будет работать для столбцов, если у нас есть гибкий контейнер с flex-direction: column, и установлено значение width 0 (вместо height) для элемента разрыва строки:

/* Используем столбец разрыва для переноса в новый столбец */
.break-column {
  flex-basis: 100%;
  width: 0;
}

Такой подход с использованием элементов разрыва для определения макета добавляет некоторое раздутие и шум в HTML, но он может быть мощным инструментом при правильном использовании. Мы можем, например, использовать его для верстки макета кладки с помощью чистого CSS и динамически размещать разрывы с помощью свойства order. Мы также можем перейти к новой строке, не изменяя ширину какого-либо элемента содержимого, и мы можем полагаться исключительно на распределение пространства в макете сетки с помощью flex-grow.

Предположим, что мы хотим создать этот макет:

И предположим, что мы хотим сделать это, задав разные значения flex-grow для распределения пространства (вместо использования flex-basis или width, которые вам придется пересчитывать, когда вы добавляете или удаляете элементы):

.item { flex-grow: 1; }
.item-wide { flex-grow: 3; }

<div></div>
<div></div>
<div></div>

Если затем мы хотим добавить еще одну строку элементов ниже этой:

Мы не сможем сделать это, не устанавливая flex-basis или width, по крайней мере, для некоторых элементов (или не создавая вложенный макет flexbox с одним flex-элементом для каждой строки). Если все элементы имеют разные значения flex-grow, и ничто не заставляет их переноситься на новую строку, они все просто втиснутся в одну строку:

Неплохо. Однако, если мы вставим элемент разрыва строки, мы можем построить этот макет, распределяя все пространство с помощью flex-grow:

.item { flex-grow: 1; }
.item-wide { flex-grow: 3; }

<div></div>
<div></div>
<div></div>
<div></div> <!-- разрыв -->
<div></div>
<div></div>

Это задает нужный макет, со всеми размерами, определенными пропорционально через flex-grow:

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

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div> <!-- разрыв -->
<div></div>
<div></div>

Все, что вам нужно добавить в CSS, чтобы использовать элементы разрыва строки — это эти два класса (единственное различие между этими двумя классами состоит в том, что для width (а не для height) необходимо установить 0, чтобы элемент разрывал столбец при использовании в макете столбцов):

/* Использование разрыва строки между двумя flex-элементами заставит 
 * flex-элемент, который расположен после него, перенестись в новую строку */
.break {
  flex-basis: 100%;
  height: 0;
}

/* Используем разрыв столбца, чтобы перенести элемент в новый столбец */
.break-column {
  flex-basis: 100%;
  width: 0;
}

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

Автор: Tobias Bjerrome Ahlin

Источник: https://tobiasahlin.com

Редакция: Команда webformyself.

Источник: https://webformyself.com/perenos-na-novuyu-stroku-s-pomoshhyu-flexbox/

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 – может и получиться, хотя мы сами не проверяли.

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

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

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

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

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

line-break — CSS: Cascading Style Sheets

Свойство line-break CSS устанавливает, как разрывать строки китайского, японского или корейского (CJK) текста при работе с пунктуацией и символами.

 
разрыв строки: авто;
разрыв строки: свободный;
разрыв строки: нормальный;
разрыв строки: строгий;
разрыв строки: где угодно;


разрыв строки: наследовать;
разрыв строки: начальный;
разрыв строки: вернуться;
разрыв строки: не задано;
  

Значения

авто

Разрыв текста с использованием правила разрыва строки по умолчанию.

без упаковки

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

нормальный

Разрыв текста с использованием наиболее распространенного правила разрыва строки.

строгий

Разрыв текста с использованием самого строгого правила разрыва строки.

где угодно

Существует возможность мягкого переноса вокруг каждой единицы типографского символа, в том числе вокруг любого символа пунктуации или сохраненных пробелов, или в середине слов, игнорируя любые запреты на перенос строки, даже те, которые вводятся символами с GL, WJ или ZWJ класс символов или предписывается свойством разбиения по словам .Не следует отдавать приоритет различным возможностям упаковки. Переносы не применяются.

 авто | свободный | нормальный | строгий | в любом месте 

Настройка переноса текста

Посмотрите, переносится ли текст перед «々», «ぁ» и «。».

HTML

  

  
 auto: 
 そ こ は 湖 の ほ と り 々 が 輝 い て い た 
 そ の 景色 に 、 美 し い ぁ 思 わ ず つ ぶ い た。 
  
 свободно: 
 そ こ は 湖 の ほ と り 々 が 輝 い て い た 
 の 景色 に 、 美 し い な ぁ 思 わ ず つ ぶ い た。 
  
 нормальный: 
 そ こ は 湖 の ほ と り 木 々 が 輝 い て い た 
 の 景色 に 、 美 し な ぁ 思 わ ず つ ぶ い た。 
  
 строгий: 
 そ こ は 湖 の ほ と り 々 が 輝 い て い た 
 そ の 景色 に 、 美 し い な ぁ と 思 わ ず つ ぶ や い た。 
  
 в любом месте: 
 そ こ は 湖 の ほ と り 々 が 輝 い て い た 
 の 景色 に 、 美 し い ぁ 思 わ ず つ ぶ い た。 

  

CSS

 .wrapbox {width: 10em; маржа: 0,5em; пробел: нормальный; вертикальное выравнивание: сверху; дисплей: встроенный блок; }
.auto {разрыв строки: авто; }
.loose {разрыв строки: свободный; }
.normal {разрыв строки: нормальный; }
.strict {разрыв строки: строгий; }
.anywhere {разрыв строки: где угодно; }
  

Результат

Таблицы BCD загружаются только в браузере

Как с помощью CSS вставить разрыв строки перед элементом?

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

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

Пример 1:

Вывод:

Разрыв строки между элементами HTML: Разрыв строки между элементами HTML может быть добавлен с помощью свойств CSS.Есть два метода заставить встроенные элементы добавлять новую строку.

• Использование свойства display: Элемент уровня блока начинается с новой строки и занимает всю доступную ему ширину.
• Использование символа возврата каретки (\ A): Мы можем добавить новую строку, используя псевдоэлементы :: before или :: after.

Пример 2:

Вывод:

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

TL; DR: использовать разрывы строк в разметке HTML с сохранением пробелов с CSS

CSS и его поддержка в наши дни просто великолепна.Не зная слишком многого, я могу быстро создать потрясающие визуальные эффекты, не прибегая к грязным хитростям и / или обходным путям JavaScript. Строки coupla, скопированные из всемогущей школы w3schools, делают свое дело.

Однако иногда кажущееся приземленным бывает сложно. В этом конкретном случае я хотел, чтобы текст тек неестественно, просто чтобы он выглядел хорошо для целевой страницы Ibexa Global Partner Conference 2021, созданной командой маркетинга с помощью Page Builder.

В любом случае, позвольте мне поскорее рассказать вам об этом.Я хотел, чтобы в одной строке были слова «Ibexa Global», а в другой - «Партнерская конференция». При наличии свободного места вокруг браузера «Ibexa Global Partner» переносит на одну строку, а «Конференция» - на следующую. См. Иллюстрацию проблемных моментов во встроенном GIF89a ниже:

Первая мысль заключалась в том, что я могу ввести некоторые символы, чтобы принудительно разрывать строки в заголовке. Но я не хотел засорять поле заголовка тегами
, | s или чем-то в этом роде.Затем подумал, что в CSS должно быть что-то вроде этого, чтобы помочь мне вставить разрыв строки после данного слова, псевдокласс вроде nth-word или content-after-nth . Учитывая, что это было чисто косметическим, я мог жить с жестким кодированием этого для определенных размеров точек обзора.

Это не может быть единственной проблемой. Но я ничего не мог найти самостоятельно, поэтому попросил в Твиттере узнать, есть ли у кого-нибудь из CSS-хакеров-волшебников в моем кругу идеи. И, к моему удивлению, все оказалось не так просто.Петр Налепа предложил мне изучить CSS Houdini для решения более низкого уровня, Тимо Хаккинен не был уверен, можно ли это сделать без дополнительной разметки, а Веса Пийтинен предложил мне попробовать взлом с пробелами:

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

Там куча грязных пробелов. Пробелы - не грех.

Предустановленный рендеринг пробелов для некоторых точек обзора был бы элегантным. Единственная проблема, с которой я столкнулся, заключалась в вводе разрывов строк в текстовое поле. Но послушайте ... Нет проблем с тем, что я использую текстовое поле, которое было бы достаточно элегантным, и с Content Engine в Ibexa DXP, подходящем для этого в качестве заголовка ... это могло бы сработать!

Решение (скопируйте и вставьте сюда)

Так что да, длинный пост в блоге, но в итоге все, что я сделал, было следующее:

1. Сохранение текста заголовка в типе поля Ibexa DXP TextBlock (любой сервер, хранящий строку textarea должен работать)
2. Добавьте стиль рендеринга для больших окон просмотра (992 пикселей и выше), чтобы использовать предварительно заданное белое пространство для элемента

С предварительно отформатированным полем заголовка система отобразит содержимое этого ввода…

… выводится следующим образом:

 
 Ibexa Global
Партнерская конференция 
 

Это, в свою очередь, отображается с сохраненными пробелами в больших окнах просмотра с некоторыми CSS:

 @media (min-width: 992px) {
h2 {
белое пространство: предварительно;
}
}
 

Насколько я мог видеть, CSS не обрабатывает элементы на уровне символов или слов, так что это разумный обходной путь.Проблема носит косметический характер и в конечном итоге совершенно ненужна, но это решение изящно деградирует и не является слишком злым, на мой взгляд. Если у вас есть лучшее представление о том, как этого добиться, или вы видите некоторые недостатки этого подхода, дайте мне знать в Twitter или Hacker News. Токены Word в CSS? Лучше обернуть разметку?

Фото Джошуа Несса на Unsplash

Предварительно рассчитанные разрывы строк для HTML / CSS

Несмотря на постепенное улучшение, типографика на веб-страницах имеет значительно более низкое качество, чем высококачественная типографика для печати / PDF, например, созданная L ^a T _e X или Adobe InDesign.В частности, необходимо значительно улучшить перенос строк и расстановку переносов. В то время как CSS изначально никогда не указывал, какой алгоритм разрыва строки следует использовать, все браузеры сошлись на жадном разрыве строк, который дает некачественную типографику, но работает быстро, просто и стабильно. CSS Text Module Level 4 стандартизирует текущее поведение по умолчанию с помощью свойства text-wrap и вводит параметр pretty , который указывает браузеру использовать более качественный алгоритм разрыва строки.Однако на момент написания ни один из браузеров не поддерживал это свойство.

Недавно я наткнулся на библиотеку CSS для эмуляции внешнего вида L ^, T _e X по умолчанию. ¹ Однако он не эмулирует алгоритм разрыва линии Кнута – Пласса, который является одним из факторов, благодаря которым L ^a T _e X выглядит хорошо. Это заставило меня задуматься, можно ли имитировать это с помощью простого HTML и CSS. Библиотека JavaScript уже существует для эмуляции этого, но она добавляет дополнительную сложность и работает немного медленнее.Оказывается, можно предварительно рассчитать разрывы строк и расстановку переносов для столбцов определенной ширины способом, который может быть закодирован в HTML и CSS, если веб-шрифты используются для стандартизации внешнего вида текста в различных браузерах.

Ключ состоит в том, чтобы обернуть все возможные разрывы строк (вставленные через :: после псевдоэлементов ) и дефисы в элементах, которые по умолчанию скрыты с display: none; . Затем мультимедийные запросы используются для выборочного отображения разрывов строк, относящихся к заданной ширине столбца.Поскольку каждая строка имеет явный разрыв строки, необходимо включить выравнивание с помощью text-align-last: justify; и межсловный интервал: -10 пикселей; используется, чтобы избежать дополнительных автоматических разрывов строк из-за небольших различий в форматировании между браузерами. Однако это представляет проблему для фактической последней строки каждого абзаца, поскольку теперь она также выровнена по ширине, а не по левому краю. Это решается заключением каждой возможной последней строки в элемент . Используя медиа-запросы, элемент , соответствующий заданной ширине столбца, настраивается на использование display: flex; , что заставляет контент выравниваться по левому краю и занимает минимально необходимое пространство, тем самым отменяя выравнивание; межсловный интервал: 0; также настроен на отмену предыдущего изменения и исправление интервала между словами.К сожалению, вложенные элементы проблематичны, потому что между ними нет пробелов; это исправляется включением пробела в разметку HTML в начале и установкой white-space: pre; , чтобы появилось пространство.

Я подготовил демонстрационную страницу, демонстрирующую эту технику. Он был построен путем вычисления разрывов строк в Firefox 76 с использованием букмарклета tex-linebreak и ручной вставки разметки, соответствующей разрывам строк; некоторые исправления были внесены вручную, поскольку библиотека не поддерживает должным образом длинное тире.Разрывы строк были рассчитаны для столбцов шириной от 250 до 500 пикселей с шагом 50 пикселей. Разрывы строк по Кнуту – Плассу приводят к значительному улучшению внешнего вида текста, особенно для более узких столбцов. В дополнение к улучшенным разрывам строк я также реализовал выступление дефисов, точек и запятых на правом поле, технику микротипографии, которая еще больше улучшает внешний вид. Чтобы (надеюсь) избежать проблем с программами чтения с экрана, в добавленной разметке устанавливается aria-hidden = "true" ; пользовательский выбор: нет; Также установлен , чтобы избежать проблем с копированием текста.

Хотя этот метод отлично работает в Firefox и Chrome, он не работает в Safari, поскольку Safari не поддерживает text-align-last начиная с Safari 13. ² Несмотря на то, что он не работает, соответствующая ошибка WebKit отмечена как «решено исправлено»; похоже, что поддержка была фактически добавлена ​​в 2014 году, но она стоит за флагом времени компиляции CSS3_TEXT , который по умолчанию отключен. Таким образом, я разработал альтернативный метод, который использовал невидимые элементы шириной 100% для принудительного переноса строк без использования явных разрывов строк.Это снова сработало в Firefox и Chrome, хотя и вызывало незначительные проблемы с выделением текста, но снова имело серьезные проблемы в Safari. Похоже, что Safari неправильно обрабатывает выровненный по ширине текст с отрицательным интервалом между словами; Однако ослабление межсловного интервала вызывает дополнительные разрывы строк из-за различий в форматировании, что нарушает методику. На этом этапе я отказался от поддержки Safari и просто настроил его на использование разрыва строки по умолчанию в браузере, поместив CSS метода за запросом @supports для text-align-last: justify .

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

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

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

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

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

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

Синтаксис

перенос строки: авто | свободный | нормальный | строгий

Возможные значения

авто

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

без упаковки

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

нормальный

Разрывает текст с использованием наиболее распространенного набора правил разрыва строк.

строгий

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

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

начальная

Представляет значение, указанное в качестве начального значения свойства.

наследовать

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

снято

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

Основная информация об имуществе

Начальное значение

авто

Относится к

Все элементы.

Унаследовано?

Есть

Медиа

Визуальный

Анимационный

Нет

Пример кода

п { ширина: 12em; разрыв строки: строгий; }

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

Префиксы поставщиков

Для максимальной совместимости с браузером многие веб-разработчики добавляют свойства браузера, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т. д.Как и в случае с любым свойством CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

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

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

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

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

Как предотвратить разрыв строки с помощью тега h2, h3, h4

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

Как веб-дизайнерам, так и специалистам по поисковой оптимизации необходимо использовать теги заголовков: h2, h3, h4 несколькими способами, чтобы улучшить структуру веб-страницы и содержимое тегов с разной степенью важности.

Вы можете отформатировать теги заголовков, такие как h2 и h3, как встроенные и предотвратить разрыв сразу после них. Удаление отступов и полей не приводит к удалению новой строки. По умолчанию теги заголовков занимают все горизонтальное пространство, где они появляются.

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

Как предотвратить автоматический разрыв строки с помощью тегов заголовков

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

дисплей: встроенный

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

h2 {display: inline;}

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

HTML-элементов могут отображаться либо в блоке , либо в встроенном стиле .

https://www.ironpaper.com/articles/responsive-web-design-statistics-that-matter/

Различия между блочными и встроенными стилями

• дисплей: блок - занимает всю доступную ширину - с новой строкой до и после элемента
• display: inline - занимает ровно столько ширины, сколько требуется элементу.Это не заставляет новые строки.

Узнайте больше о приемах HTML и CSS:

1. Сделать перенос текста

    с помощью CSS 

2. Структура CSS3 Drop Shadow
3. Как использовать тени CSS

Разрыв строки - CSS - W3cubDocs

Свойство line-break CSS устанавливает, как разрывать строки китайского, японского или корейского (CJK) текста при работе с пунктуацией и символами.

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

/ * Глобальные значения * /
разрыв строки: наследовать;
разрыв строки: начальный;
разрыв строки: не задано;
 

Синтаксис

Значения

auto

Разрыв текста с использованием правила разрыва строки по умолчанию.

свободный

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

нормальный

Разрыв текста с использованием наиболее распространенного правила разрыва строки.

strict

Разрыв текста с использованием самого строгого правила разрыва строки.

в любом месте

Существует возможность мягкого переноса вокруг каждого блока типографских символов, в том числе вокруг любого символа пунктуации или сохраненных пробелов, или в середине слов, игнорируя любые запреты на перенос строки, даже те, которые вводятся символами с класс символов GL, WJ или ZWJ или предписывается свойством разрыв слова .Не следует отдавать приоритет различным возможностям упаковки. Переносы не применяются.

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

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

 auto | свободный | нормальный | строгий | в любом месте 

Примеры

Настройка переноса текста

Посмотрите, переносится ли текст перед «々», «ぁ» и «。».

HTML

 

 auto: 
 そ こ は 湖 の ほ と り 々 が 輝 い て い た 
 そ の 景色 に 、 美 し い ぁ 思 わ ず つ ぶ い た。 
 свободно: 
 そ こ は 湖 の ほ と り 々 が 輝 い て い た 
 の 景色 に 、 美 し い な ぁ 思 わ ず つ ぶ い た。 
 нормальный: 
 そ こ は 湖 の ほ と り 木 々 が 輝 い て い た 
 の 景色 に 、 美 し な ぁ 思 わ ず つ ぶ い た。 
 строгий: 
 そ こ は 湖 の ほ と り 々 が 輝 い て い た 
 そ の 景色 に 、 美 し い な ぁ と 思 わ ず つ ぶ や い た。 
 в любом месте: 
 そ こ は 湖 の ほ と り 々 が 輝 い て い た 
 の 景色 に 、 美 し い ぁ 思 わ ず つ ぶ い た。 

 

CSS

.wrapbox {width: 10em; маржа: 0,5em; пробел: нормальный; вертикальное выравнивание: сверху; дисплей: встроенный блок; }
.auto {разрыв строки: авто; }
.loose {разрыв строки: свободный; }
.normal {разрыв строки: нормальный; }
.strict {разрыв строки: строгий; }
.anywhere {разрыв строки: где угодно; }
 

Результат

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