Перенос слов по слогам html css: Изучаем CSS — перенос слов

У меня есть <div> , который содержит <p> , в котором я хочу, когда p больше, чем экран пользователя (например, пользователь намеренно публикует длинную строку символов, чтобы сломать…

Как вы можете отобразить длинную строку, адрес веб-сайта, слово или набор символов с автоматическими разрывами строк, чтобы сохранить ширину div? Наверное, что-то вроде словесной обертки. Обычно…

У меня есть HTML и CSS, как показано в http://jsfiddle.net/Lijo/Ydjde / Проблема в том, что текст внутри div не ограничивается div. Он ломает div и пишет. Как мы можем обернуть текст внутри самого…

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

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

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

У меня есть длинный текст без пробелов (например, URL) в <div> . <div> <span>veryverylongtextwithoutspaces</span> </div> Если я установлю display:inline-block; , то…

Используя только CSS, я хочу как перенос слов, так и многоточие, как только контейнер заполняется вертикально. Согласно исследованиям, я могу иметь многоточие только в том случае, если white-space:…

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

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

CSS свойство разрыва слова

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

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

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

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

Синтаксис CSS

слово-разрыв: нормальный | разрыв-все | сохранить-все | разрыв-слово | начальный | наследование;

Стоимость недвижимости

Обработка длинных слов и URL-адресов (принудительные разрывы, расстановка переносов, многоточие и т. Д.)

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

Например:

Вот большой фрагмент со всеми задействованными игроками CSS:

  .dont-break-out {

  / * Технически они одинаковы, но используются оба * /
  переполнение-обертка: слово-прерывание;
  перенос слов: слово-пауза;

  -ms-word-break: сломать все;
  / * Это опасный метод в WebKit, так как он везде ломает * /
  слово-разрыв: сломать все;
  / * Вместо этого используйте нестандартный: * /
  слово-разрыв: разрыв-слово;

  / * Добавляет дефис в месте разрыва слова, если поддерживается (без мигания) * /
  -ms-дефисы: авто;
  -moz-дефисы: авто;
  -webkit-дефисы: авто;
  дефисы: авто;

}  

Это решит проблему для нас:

Вот совок:

• переполнение-перенос: слово прерывания; следит за тем, чтобы длинная нить обернулась и не выскочила из контейнера.Вы также можете использовать word-wrap , потому что, как сказано в спецификации, они буквально являются просто альтернативными именами друг для друга. Некоторые браузеры поддерживают одно, а не другое. Firefox (проверено v43) поддерживает только перенос слов . Blink (проверено Chrome v45) примет любой.
• Когда overflow-wrap используется сам по себе, слова будут ломаться везде, где им нужно. Если есть символ «допустимого разрыва» (например, буквальное тире), он там прервется, в противном случае он просто сделает то, что ему нужно.
• Вы также можете использовать дефисов и , потому что тогда он попытается со вкусом добавить дефис там, где он ломается, если браузер его поддерживает (Blink не поддерживает на момент написания, Firefox делает).
• word-break: разбить все; сообщает браузеру, что можно разбивать слово везде, где это необходимо. Несмотря на то, что это так или иначе, я не уверен, в каких случаях это необходимо на 100%.

Если вы хотите, чтобы дефисы были более ручными, вы можете предложить их в разметке.Смотрите больше на странице MDN.

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

Для

Desktop

900 Mobile /

Для

Настольный компьютер

Мобильный / Планшет

Для

Desktop

10 Mobile /

Для

Desktop

10 Mobile /

Предотвращение переполнения с помощью многоточия

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

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

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

Примеры

См. Перо с переносом длинных слов от CSS-Tricks (@ css-tricks) на CodePen.

См. Эллипсы пера от CSS-Tricks (@ css-tricks) на CodePen.

См. Статью Криса Койера (@chriscoyier) на CodePen.

Дополнительные ресурсы

Для SCSS-наклонного

Обычно это такие вещи, которые вы добавляете в код там, где это необходимо, поэтому они создают хорошие @mixins:

  @mixin word-wrap () {
  переполнение-обертка: слово-прерывание;
  перенос слов: слово-пауза;
  -ms-word-break: сломать все;
  слово-разрыв: сломать все;
  слово-разрыв: разрыв-слово;
  -ms-дефисы: авто;
  -moz-дефисы: авто;
  -webkit-дефисы: авто;
  дефисы: авто;
}  

  @mixin ellipsis () {
  переполнение: скрыто;
  белое пространство: nowrap;
  переполнение текста: многоточие;
}  

html — разница между переносом через переполнение и разрывом слова?

Вот точные различия: (на основе тестирования в Chrome v81 и подтверждения моих наблюдений ссылкой на спецификацию)

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

нормальный (по умолчанию): сворачивает цепочки пробелов и разрывы строк; добавляет разрывы строк там, где это необходимо.
nowrap : сворачивает цепочки пробелов и разрывы строк; не добавляет разрывы строк
перед строкой : сворачивает цепочки пробелов; добавляет разрывы строк там, где это необходимо.
pre-wrap : без сворачивания; добавляет разрывы строк там, где это необходимо
пробелов-разрывов : то же, что и перед переносом, за исключением пробелов, способных запускать добавление разрыва строки
до : без сворачивания; не добавляет перенос строки

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

разрыв слов

нормальный (по умолчанию): разрыв строки в конце последнего слова, подходящего в контейнере [если он существует], иначе строка остается неразрывной
break-word : разрыв строки в конце последнего слова, подходящего в контейнере [если он существует] , иначе в конце контейнера
разбить все : разрывает строку в конце контейнера [можно разделить слово, даже с соседним пробелом]

overflow-wrap (устаревшее название: word-wrap)

нормальный (по умолчанию): разрыв строки в конце последнего слова, подходящего в контейнере [если он существует], в противном случае строка остается неразрывной
break-word : разрыв строки в конце последнего слова, подходящего в контейнере [если он существует] , иначе в конце контейнера [в негибком контейнере], в противном случае строка осталась неразрывной
в любом месте : разрыв строки в конце последнего слова, подходящего в контейнере [если он существует], в противном случае в конце контейнера [так же, как word-break: break-word ]

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

слов | Codrops

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

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

Свойство word-wrap действует только тогда, когда white-space разрешает перенос.

Свойство word-wrap называется overflow-wrap в спецификации CSS Text Level 3 (которая все еще является рабочим проектом, поэтому все может измениться).

Общая информация и примечания

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

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

Значения

нормальный

строки могут разрываться только в обычных точках разрыва слова.

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

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

Примеры

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

п {
    перенос слов: слово-пауза;
}
                 

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

* обозначает обязательный префикс.

• Поддерживается:
• Да
• Нет
• Частично
• Polyfill

Статистика с caniuse.com

Автор Сара Суейдан. Последнее обновление: 11 декабря 2016 г., 22:55, автор: Мэри Лу.

У вас есть предложение, вопрос или вы хотите внести свой вклад? Отправить вопрос.

перенос слов · Документы WebPlatform

Сводка

Псевдоним css / properties / overflow-wrap, word-wrap определяет, следует ли прерывать слова, когда содержимое выходит за границы своего контейнера.

Обзорная таблица

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

нормальный

Относится к

Все элементы

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

Да

Медиа

визуал

Расчетное значение

указанное значение

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

Нет

Свойство объектной модели CSS

wordWrap

Синтаксис

• перенос слов: разрыв слова
• перенос слов: обычный

Значения

нормальный

По умолчанию.Строки могут быть разорваны только в обычных точках разрыва (пробелы, не буквенно-цифровые символы и т. Д.).

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

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

Примеры

Это правило стиля, применимое к примеру.

  .NormalValue {перенос слов: нормальный; цвет фона: светло-серый; }
.WithBreaks {перенос слов: слово-разрыв; цвет фона: светло-серый; }
.NormalValueNarrow {перенос слов: нормальный; цвет фона: светло-серый; width: 10px}
.WithBreaksNarrow {перенос слов: слово-разрыв; цвет фона: светло-серый; width: 10px}
.WithBreaksNoWrap {перенос слов: слово-разрыв; цвет фона: светло-серый; ширина: 10 пикселей; белое пространство: nowrap; }
.clsLiteral {семейство шрифтов: Courier New, Courier, моноширинный; }
  

Посмотреть живой пример

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

  








 
 свойство wordWrap 
 

 Обратите внимание , что элементы  "p"  в примерах имеют макет, потому что их ширина задана.


<час />


В этих примерах показано значение  break-word  свойства  wordWrap .


LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord



блондинка


<час />

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



LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord



блондинка


<час />


В этих примерах показано значение  break-word  для
 wordWrap  с  white-space: nowrap .


Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово



блондинка


<час />


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


LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord



LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord


<час />
 

  

Посмотреть живой пример

Банкноты

Замечания

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

Информация о стандартах

Связанные спецификации

Текстовый модуль CSS, уровень 3

Рекомендация W3C

Атрибуты

Как изменить обтекание текстом по умолчанию с помощью HTML и CSS

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

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

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

Читайте также: 15 красивых текстовых эффектов, созданных с помощью CSS

Когда менять обтекание текстом по умолчанию

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

Также может случиться так, что нам просто отчаянно нужно этих пробелов, сохраненных в нашем тексте , однако браузер продолжает объединять их в одно, заставляя нас добавлять несколько & nbsp; в исходном коде.

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

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

Возможности мягкой упаковки и разрывы мягкой упаковки

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

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

Пробел

Если вы знакомы со свойством CSS white-space , держу пари, вы впервые узнали его так же, как и многие другие; при поиске пути к предотвратить перенос текста .Значение nowrap из white-space делает именно это.

Однако свойство white-space — это больше, чем просто перенос. Прежде всего, что такое пробелы? Это наборов пробелов . Каждое пространство в наборе отличается друг от друга на по длине, направлению или и тем, и другим.

Типичный символ горизонтального пробела — это то, что мы добавляем, нажимая клавишу пробела. Клавиша Tab также добавляет аналогичного пробела, но с большей длиной .Клавиша Enter добавляет вертикальный интервал для начала новой строки и & nbsp; в HTML добавляет единственное неразрывное пространство на веб-страницы. Таким образом, существует множество типов пробелов, составляющих «пробелы».

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

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

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

¢ š˜ Привет. ¢ š˜ Привет. à ¢ š˜ Привет

¢ š˜ Привет.



¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет.
¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет.
¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет.

¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет.¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет.
¢ š˜ Привет. ¢ š˜ Привет.
 

.textContainer {
  ширина: 500 пикселей;
  высота: 320 пикселей;
}
 

После применения white-space: nowrap; , обтекание текста меняется следующим образом:

.textContainer {
  / * ... * /
  белое пространство: nowrap;
}
 

Значение до пробелов сохраняет все пробелы и предотвращает перенос текста :

.textContainer {
  / * ... * /
  белое пространство: предварительно;
}
 

Предварительный перенос значение пробелов сохраняет все пробелы и переносит текст :

.textContainer {
  / * ... * /
  белое пространство: предварительная упаковка;
}
 

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

.textContainer {
  / * ... * /
  пробел: предварительная строка;
}
 

Разрывы слов

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

Однако, если у вас нужно разрешить разбиение букв в слове , чтобы текст выглядел даже с правой стороны, вам нужно использовать значение break-all для свойства word-break :

.textContainer {
  / * ... * /
  слово-разрыв: сломать все;
}
 

Свойство разрыв слова имеет третье значение помимо разрыв всего и нормальный (принадлежащий к разрыву строки по умолчанию). Значение keep-all не позволяет разбивать слова .

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

Например, букв в корейских словах , изначально разорванных для переноса, сохраняются вместе , когда white-space: keep-all; правило указано.

 
 ì „¸ê³„ à «¥ ¼ à–  ¥ à• Âœ ë Œ €  ™  », ¬ÂœÂ«  ‹ÂˆÃ¬Â½Â »«  «ÂœÃ« ¡œ à• ˜ì ‹Âì‹ œì˜¤. ¬Â Âœ10ÚŒ 유à «Â‹ ˆì½ »Ã«  «Âœ µÂ제 ڌ젘꠰  € 1997» «Â… „ 3젛» 10ì ¼à «Â¶Â € „  ° 12젼까짠€ à «Â Â… 젼젠˜ à «Â§ÂˆÃ¬Â ¸ì¦ˆì -  ¬Â„ Âœ ì — ´à «Â¦Â½Ã«  ‹ÂˆÃ«  ‹Â¤.¬Â§Â € ¸ˆ à «Â«  ± à «Â¡Â Ã • ˜ì‹ Â젋œì˜¤. ¬Â ´ šŒì ˜ì -  ¬Â „ϑ Š »Ã¬Â — Â… 계 ì  „ë  ° ˜ì ˜ ¬Â  „« ¬¸ê °  € à «Â« ¤ì ´  • ¨ê »Â˜ ë ª¨ì —В¬ à «Â‹ ¤ì Œê³¼ ê °  ™ ì  € «Â¶Â„ ¬Â • ¼à «¥ ¼ ë  ‹Â¤Ã«  £ ¹à «Â‹ ˆà «Â‹ ¤. 
 

.textContainer {
  / * ... * /
  слово-разрыв: сохранить все;
}
 

В будущем это свойство может поддерживать другое значение, называемое break-word . Вы увидите, как работает прерывание позже, в разделе «Перенос переполнения» этой статьи.

Возможности разрыва слова

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

¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ H  элло

¢ š˜ Привет.



¢ š˜ Привет. ¢ š˜ Привет.¢ š˜ Привет. ¢ š˜ Привет.
¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет.
¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет.

¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет.
¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет.
¢ š˜ Привет. ¢ š˜ Привет.

 

.textContainer {
  / * ... * /
  белое пространство: предварительная упаковка;
}
 

Без все слово «Hello» было бы отображено в новой строке.Добавив в HTML-код, мы проинформировали браузер, что можно разбить слово в этом месте для переноса , если это необходимо.

Дефис

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

Его авто значение предлагает браузеру автоматически переносить и разбивать слова там, где это необходимо, при переносе.Значение manual заставляет браузеры переносить (при необходимости) при возможностях переноса, добавленных нами , таких как символ дефиса (& hyphen;) или & shy; (мягкий дефис). Если значение отсутствует , то не будет переноситься рядом с дефисами .

синий дом синий дом синий дом синий дом синий дом синий дом синий дом
bluehouse bluehouse bluehouse голубой дом

 

.textContainer {
  / * ... * /
  -webkit-дефисы: авто;
  -ms-дефисы: авто;
  дефисы: авто;
}
 

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

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

Обратите внимание, что overflow-wrap также известен как word-wrap (это псевдонимы).

синийДомсинийДомсинийДом

 

.textContainer {
  / * ... * /
  переполнение-обертка: слово-прерывание;
}
 

Если в приведенном выше HTML-коде нет пробелов между буквами (т. Е. Нет возможности переноса), текст сначала не переносился, и сохранялся как одно слово .

Однако, когда было дано разрешение на перенос текста путем разрыва слов (т.е. значение break-word было присвоено overflow-wrap ), перенос происходил путем разрыва всей строки там, где это было необходимо.

Читайте также: Работа с текстом в масштабируемой векторной графике (SVG)

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

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

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

Свойство переноса слов является одним из свойств CSS3.

Он действует только тогда, когда свойство white-space разрешает перенос.

Синтаксис¶

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

Пример свойства переноса слов с «нормальным» значением: ¶

  

  
    
    <стиль>
      div {
        ширина: 120 пикселей;
        граница: 1px solid # 666;
        перенос слов: нормальный;
      }
    
  
  
     
 Пример свойства переноса слов 
 
    

      Lorem Ipsum - это
       простопростопростопростопросто 
       фиктивный текст печати и верстки
       industryindustryindustryindustryindustry .
  
  

Результат¶

Пример свойства переноса слов со значением« break-word »: ¶

   <стиль> div {
 ширина: 120 пикселей;
 граница: 1px solid # 666;
 перенос слов: слово-пауза;
 } 
 Пример свойства переноса слов 
 Lorem Ipsum - это  простопростопростопростопросто  фиктивный текст печати и верстки  industryindustryindustryindustryindustry .
No related posts.