Text wrap css: CSS word-spacing property

Содержание

css властивість word-wrap

Головна
css
властивості
word-wrap

Властивість word-wrap, вказує, чи переносити довгі слова, котрі не влазять по ширині в заданій області.

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

Властивість word-wrap є альтернативним ім’ям для властивості overflow-wrap. Вона вказує, чи дійсно непорожні слова можуть бути перенесені, щоб запобігти переповненню, контейнера.

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

Властивість word-wrap має ефект, лише коли властивість white-space дозволяє обгортати рядки (це робиться за умовчанням).

Нотатка:

На відміну від word-break, word-wrap лише створить розрив, якщо ціле слово не може бути розміщене у рядку без переповнення.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

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

Властивість word-wrap може отримувати 4 значення:

normal: Рядки не переносяться або переносяться в тих місцях, де явно задане перенесення. В цьому випадку можливий вихід слів за межі контейнера.
break-word: Перенесення рядків додається. Браузер самостійно визначить де перенести слово, щоб воно не вилізло за межі контейнера.
initial: Встановлює властивість у значення без задання
inherit: Вказує на спадковість властивостей від свого батьківського елемента

Значення без задання:	normal
Наслідує:	Так
Анімується:	Ні
JavaScript синтаксис:	object. style.wordWrap=»break-word»

Переглядачі

Стаціонарні переглядачі
Мобільні переглядачі

Переглядач
word-wrap	1.0	5.5	3.5	1.0	10.5	12.0

Переглядач
word-wrap	1. 0	4.0	1.0

Приклади

Приклад 1
Приклад 2
Приклад 3

Різні значення власивості


 See the Pen OBbqje by css.in.ua (@css_in_ua) on CodePen.

Приклад використання

Дозволяє перенос довгих слів на наступний рядок

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

Додаткові посилання

text-align

line-height

white-space

text-indent

word-break

word-spacing

tab-size

text-align-last

text-transform

hanging-punctuation

text-justify

direction

letter-spacing

user-select

writing-mode

Свойство интервала между словами в CSS

❮ Назад Полное руководство по CSS Далее ❯

Пример

Укажите, что расстояние между словами в элементах

должно составлять 30 пикселей:

p {
интервал между словами: 30 пикселей;
}

Попробуйте сами »

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

Свойство word-spacing увеличивает или уменьшает пробелы между словами.

Примечание: Допускаются отрицательные значения.

Показать демо ❯

Значение по умолчанию:	обычный
Унаследовано:	да
Анимация:	да. Читать о анимированном Попробуй
Версия:	CSS1
Синтаксис JavaScript:	объект .style.wordSpacing=»20px» Попробуй

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

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

Собственность
межсловный интервал	1,0	6,0	1,0	1,0	3,5

Синтаксис CSS

расстояние между словами: нормальный| длина |начальный|наследовать;

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

Значение	Описание	Демо
обычный	Определяет нормальный интервал между словами (0,25 em). Это по умолчанию	Демонстрация ❯
длина	Определяет дополнительный пробел между словами (в px, pt, cm, em и т. д.). Допускаются отрицательные значения. Читать о единицах длины	Демонстрация ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

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

Учебник CSS: Расстояние между текстом CSS

Ссылка на HTML DOM: Свойство wordSpacing

❮ Назад Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS

Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.

CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9000 3

Основные каталожные номера

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

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

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

CSS text-wrap: balance — Chrome Developers

Chrome Canary включает новую функцию — text-wrap: balance from CSS Text Level 4. Чтобы проверить это, включите chrome://flags/#enable-experimental- web-platform-features, а затем взгляните на примеры в этом посте, чтобы узнать, как одна строка CSS может значительно улучшить макеты вашего текста.

Попробуйте демо

Без перенос текста: баланс ; у дизайнеров, редакторов контента и издателей есть несколько инструментов для изменения баланса линий. Лучшие доступные варианты — использовать или , чтобы помочь направить текстовые макеты к более разумным решениям о том, где разбивать строки и слова.

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

Попробуйте демо

 .unbalanced { 
 max-inline-size: 50ch; 
 }

С помощью text-wrap: balance из CSS Text 4 вы можете запросить у браузера наилучшее сбалансированное решение переноса строк для текста. Браузер знает все факторы, такие как размер шрифта, язык и выделенная область. Результаты сбалансированного переноса текста в браузере сегодня выглядят следующим образом в Chrome Canary с включенными функциями chrome://flags/#enable-experimental-web-platform-features:

Попробуйте демоверсию

 .balanced { 
 max-inline-size: 50ch; 
 text-wrap: баланс; 
 }

Полезно видеть их рядом, без наложения отладочной информации.

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

# Нахождение баланса

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

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

Попробуйте демонстрацию

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

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

Однако в Интернете возможности управления ограничены, поскольку размеры и цвета документа меняются в зависимости от пользователей. text-wrap: balance привносит искусство балансировки текста в Интернет автоматизированным способом, основываясь на работе и традициях дизайнеров полиграфической отрасли.

# Балансировка заголовков

Это будет и должно быть основным вариантом использования text-wrap: balance . Нарисуйте глаз размером и сделайте его симметричным и разборчивым для глаза. Установите для всех заголовков сбалансированный перенос текста с помощью следующего CSS:

 h2,h3,h4,h5,h5,h6 { 
 text-wrap: balance; 
 }

Простое применение этого стиля может не дать ожидаемых результатов, так как текст должен переноситься и, следовательно, где-то применяется максимальная длина строки. В примерах в этом посте вы увидите max-inline-size , этот стиль похож на max-width , но может быть установлен один раз для любого языка.

# Ограничения

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

Попробуйте демо-версию

# Вопросы производительности

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

Не

 * { 
 text-wrap: balance; 
 }

СЧИТАТЬ ВМЕСТО

 h2, h3, h4, h5, h5, h6, цитата { 
 text-wrap: balance; 
 }

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

# Взаимодействия со свойством

white-space

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

 .balanced { 
 пробел: не установлен; 
 text-wrap: баланс; 
 }

# Балансировка не изменит встроенный размер элемента

У некоторых решений JavaScript есть преимущество для сбалансированного переноса текста, поскольку они изменяют0019 max-width самого содержащего элемента. Это имеет дополнительный бонус в виде «упаковки в термоусадочную пленку» для сбалансированного блока. text-wrap: balance не имеет такого эффекта и может быть замечено в этом примере:

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

text-wrap: balance не так уж и хороши, по крайней мере, на мой взгляд. Например, заголовки внутри карточки (или любого контейнера с границами или тенями).