Содержание

white-space | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 4.0+ 9.5+ 1.0+ 3.0+ 1.0+ 3.5+ 1.0+ 1.0+

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

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

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

Значения

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

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

Табл. 1. Перенос текста и пробелы при разных значениях white-space
Значение Перенос текста Пробелы
normal Переносится Не учитываются
nowrap Не переносится Не учитываются
pre Не переносится Учитываются
pre-line Переносится Не учитываются
pre-wrap Переносится Учитываются

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>white-space</title>
  <style>
   .example {
    border: 1px dashed #634f36; /* Параметры рамки */
    background: #fffff5; /* Цвет фона */
    font-family: "Courier New", Courier, monospace; /* Семейство шрифта */
    padding: 7px; /* Поля вокруг текста */
    margin: 0 0 1em; /* Отступы */
    white-space: pre; /* Учитываются все пробелы и переносы */ 
   } 
   .exampleTitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем линию снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Отображать как встроенный элемент */
    background: #efecdf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер шрифта */
    margin: 0; /* Убираем отступы */
    white-space: nowrap; /* Переносов в тексте нет */
   }
  </style>
 </head>
 <body> 
  
  <p>Пример</p>
  <p>
   &lt;html&gt;
   &lt;body&gt;
   &lt;b&gt;Великая теорема Ферма&lt;/b&gt;&lt;br&gt;
   &lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;
   + Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; =
   Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt;
   где n - целое число &gt; 2
   &lt;/body&gt;
   &lt;/html&gt;
  </p>
  
 </body>
</html>

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

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

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

[window.]document.getElementById(«elementID»).style.whiteSpace

Браузеры

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

Opera до версии 9.5 не поддерживает значение pre-line. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line.

Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap. Для <textarea> значения normal, nowrap, и pre воспринимаются как pre-wrap.

htmlbook.ru

white-space | CSS | WebReference

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

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

Значение по умолчаниюnormal
НаследуетсяДа
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис ?

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

Обозначения

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

Значения

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

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

Табл. 1. Перенос текста и пробелы при разных значениях white-space
ЗначениеПеренос текстаПробелы
normalПереноситсяНе учитываются
nowrapНе переноситсяНе учитываются
preНе переноситсяУчитываются
pre-lineПереноситсяНе учитываются
pre-wrapПереноситсяУчитываются

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>white-space</title>
  <style>
   .example {
    border: 1px dashed #634f36; /* Параметры рамки */
    background: #fffff5; /* Цвет фона */
    font-family: "Courier New", Courier, monospace; /* Семейство шрифта */
    padding: 7px; /* Поля вокруг текста */
    margin: 0 0 1em; /* Отступы */
    white-space: pre; /* Учитываются все пробелы и переносы */ 
   } 
   .exampleTitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем линию снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Отображать как встроенный элемент */
    background: #efecdf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер шрифта */
    margin: 0; /* Убираем отступы */
    white-space: nowrap; /* Переносов в тексте нет */
   }
  </style>
 </head>
 <body> 
  <p>Пример</p>
  <p>
   &lt;html&gt;
   &lt;body&gt;
   &lt;b&gt;Великая теорема Ферма&lt;/b&gt;&lt;br&gt;
   &lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;
   + Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; =
   Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt;
   где n - целое число &gt; 2
   &lt;/body&gt;
   &lt;/html&gt;
  </p>
 </body>
</html>

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

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

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

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

Объект.style.whiteSpace

Примечание

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line и pre-wrap. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведёт себя как pre-line.

Opera до версии 9.5 не поддерживает значение pre-line. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

В Firefox для <textarea> значения normal, nowrap, и pre воспринимаются как pre-wrap.

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

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

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

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

Браузеры ?

normal5.5121411
pre6121411
nowrap5.5121411
pre-wrap8121833
pre-line81219.533.5
 
normal1141
pre1141
nowrap1141
pre-wrap1493
pre-line14103

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

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

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

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

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

Курс по вёрстке сайта на CSS Grid

webref.ru

Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens) — Примеры

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

  1. только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел &nbsp; и неразрывный дефис &#8209;). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. «Мягкий дефис» &shy; проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то <wbr> или &#8203; переносит его часть без чёрточки. В математических выражениях используется минус (например, 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; и посмотрите на наш полигон.

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

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

<div lang="ru">Тетрагидропиранилциклопентилтетрагидропиридо<span>пиридино</span>вые</div>

<style>
.hyphens {
  -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* пока поддерживает только Firefox */ 
  text-align: justify;
}
.nohyphens {
  white-space: nowrap;
}
</style>

shpargalkablog.ru

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

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Запрет переноса</title>
  <style>
   .menu {
    padding: 0; /* Убираем поля по умолчанию */
    background: #34495e; /* Цвет фона */
   }
   .menu li {
    display: inline-block; /* Пункты меню по горизонтали */
   }
   .menu a {
    color: #fff; /* Цвет ссылок */
    padding: 10px; /* Поля вокруг текста */
    text-decoration: none; /* Убираем подчёркивание */
    display: block; /* Блочная ссылка */
    white-space: nowrap; /* Запрещаем перенос текста */
   }
   .menu a:hover {
    background: #2c3e50; /* Цвет фона при наведении */
   }
  </style> 
 </head> 
 <body> 
  <ul>
   <li><a href="#">Электроника</a></li>
   <li><a href="#">Компьютеры</a></li>
   <li><a href="#">Бытовая техника</a></li>
   <li><a href="#">Детские товары</a></li>
   <li><a href="#">Зоотовары</a></li>
   <li><a href="#">Дом, дача, ремонт</a></li>
   <li><a href="#">Одежда и обувь</a></li>
   <li><a href="#">Красота и здоровье</a></li>
   <li><a href="#">Спорт и отдых</a></li>
   <li><a href="#">Досуг и развлечения</a></li>
  </ul>
 </body>
</html>

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

Меню с запретом переноса текста

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

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

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

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

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

Курс по вёрстке сайта на CSS Grid

webref.ru

Проблемы с переносом слов | CSS

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


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

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

Давайте бегло рассмотрим основные свойства.

word-wrap/overflow-wrap

Свойство word-wrap принимает два значения: normal (по умолчанию) и break-word. Это не считая трех глобальных значений: inherit, initial и unset.

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

В первом примере показано поведение по умолчанию для таких случаев:

Посмотреть демо-версию

Второй пример этой демо-версии иллюстрирует действие свойства overflow-wrap: break-word, которое указывает браузеру разрывать слово, когда оно выходит за пределы контейнера.

Важно отметить: в текущей версии спецификации по текстам CSS3 свойство word-wrap было заменено на overflow-wrap, которое принимает те же значения. Здесь вы найдете обзор поддержки браузерами этого нового свойства.

word-break

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

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

hyphens

Свойство hyphens указывает браузеру, как обрабатывать переносы слов с добавлением дефисов. Оно принимает следующие значения: none, manual и auto. Это свойство на данный момент поддерживается браузерами не полностью, поэтому будет работать нормально только в Firefox.

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

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

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

Тег &shy; задает мягкий CSS перенос текста на новую строку – он указывает разрыв слова, если это необходимо, но дефис на экране отображается только, если слово переносится.

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

white-space

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

Свойство принимает пять значений: normal (по умолчанию), nowrap, pre, pre-wrap и pre-line.

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

Посмотреть демо-версию

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

Значение nowrap (пример 2) также не воспринимает дополнительные пробелы, но в отличие от normal строки текста не переносятся в соответствии с размерами контейнера.

pre поддерживает дополнительное пробелы в разметке и не разрывает строки при выходе за пределы контейнера, как показано в примере 3.

Пример 4, pre-wrap не объединяет пустые пространства, но переносит строки при выходе за пределы контейнера.

Значение pre-line объединяет пробелы (за исключением символов перехода на новую строку) и разрывают текст, чтобы он соответствовал границам контейнера, как показано в последнем примере.

По умолчанию блоки кода оборачиваются в теги pre и не переносятся. Это может привести к большой путанице.

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

Убедитесь, что все установленные значения white-space не приводят к объединению пустых пространств и пробелов, иначе это нарушит синтаксис кода.

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

CSS text-overflow: ellipsis является неудобным. Оно требует добавления большого количества кода, так как работает только в сочетании с кучей других свойств. Кроме этого, оно действует только на одну строку текста, что делает его еще более неудобным.
Есть JQuery-плагин, dotdotdot, который создает многоточие. С его помощью можно добавить даже ссылку в конце для продолжения чтения.

Вот пример его применения:

Посмотреть пример

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

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

Hey what did you do this we&shy;ekend? I painted some pottery, it was p neat.

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

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

Применив overflow-wrap: break-word к ссылке, вы зададите разрыв URL-адреса при ее выходе за пределы контейнера, хотя это свойство поддерживается не во всех браузерах.

Задать правильное сочетание свойств для решения проблемы переноса может оказаться непростой задачей. Но попрактиковавшись и проанализировав свои ошибки, вы сможете найти верное решение:

Данная публикация представляет собой перевод статьи «Word Wrapping Woes» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

html — Как запретить разделение слов переносом в классе в CSS

Stack Overflow на русском

Loading…

  1. 0
  2. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
  3. Войти Регистрация
  4. текущее сообщество

    • Stack Overflow на русском справка

ru.stackoverflow.com

CSS-текст

Опубликовано: 21 марта 2014 Обновлено: 30 апреля 2019

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

Основной единицей текста является символ. Тем не менее, поскольку системы письма не всегда так просты, как основной английский алфавит, то, чем на самом деле является символ, зависит от контекста, в котором используется этот термин. Например, в корейской системе письма каждое квадратное представление слога (например, 한 = хань) можно считать символом. Однако квадратный символ действительно состоит из нескольких букв, каждая из которых представляет фонему (например, ㅎ = h, ㅏ = a, ㄴ = n), и каждая из них также может считаться символом.

CSS построен на Unicode.

1. Преобразование текста: свойство text-transform

Свойство text-transform стилизует текст. Оно не влияет на базовое содержимое и не должно влиять на содержимое операции копирования и вставки простого текста.

Свойство наследуется.

text-transform
Значения:
none Значение по умолчанию, означает отсутствие эффектов.
capitalize Изменяет написание первой буквы каждого слова в элементе, делая её прописной.
uppercase Выводит все слова в элементе прописными буквами.
lowercase Выводит все слова в элементе строчными буквами.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: inherit;
text-transform: initial;

2. Обработка пробелов и переносы строк: свойство white-space

Свойство white-space обрабатывает пробелы между словами и переносы строк внутри элемента.

Свойство наследуется.

white-space
Значения:
normal Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости.
nowrap Запрещает переносы строк, за исключением применения <br>.
pre Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк.
pre-wrap Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо.
pre-line Удаляет лишние пробелы, за исключением случаев <br>.
break-spaces Поведение идентично pre-wrap, за исключением того, что: любая последовательность неудаляемых пробелов всегда занимает место, в том числе в конце строки; возможность переноса строки существует после каждого неудаляемого пробела, в том числе между пробелами.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
white-space: inherit;
white-space: initial;

3. Настройка табуляции: свойство tab-size

Свойство tab-size используется для изменения величины отступа, получаемого с помощью клавиши ТAB. Значения свойства игнорируются, когда установлено одно из трёх значений pre-line, normal или nowrap свойства white-space.

Работает только для элементов <textarea> и <pre>, для остальных блочных элементов значение всегда будет равно единице. Значения свойства, указанные в единицах длины, поддерживается только в Chrome 42+.

Свойство наследуется.

tab-size
Значения:
целое число Любое целое положительное число. По умолчанию табуляция делает отступ, равный восьми пробелам.
длина Значение отступа, указываемое в единицах длины, например, рх.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

tab-size: 0;
tab-size: 10px;
tab-size: inherit;
tab-size: initial;

4. Разрыв строки и границы слов

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

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

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

4.1. Правила разрыва для букв: свойство word-break

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

Свойство наследуется.

word-break
Значения:
normal Слова разрываются в соответствии с их обычными правилами. Значение по умолчанию.
break-all Разрыв допускается в пределах слов. Перенос слов не применяется.
keep-all Запрещает разрывы между парами символов.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

word-break: normal; 
word-break: break-all; 
word-break: keep-all;
word-break: inherit;
word-break: initial;
4.2. Разрыв строки: line-break

Свойство line-break определяет правила переноса строк, применяемых внутри элемента, в частности то, как перенос взаимодействует со знаками препинания и символами.

Свойство наследуется.

line-break
Значения:
auto Браузер определяет набор используемых ограничений на разрыв строки, которые могут варьироваться в зависимости от длины линии, например, использовать менее строгий набор правил разрыва строки для коротких строк. Значение по умолчанию.
loose Разбивает текст, используя наименее ограничивающий набор правил переноса строк. Обычно используется для коротких строк, например, в газетах.
normal Разбивает текст, используя наиболее распространенный набор правил переноса строк.
strict Разбивает текст, используя строгий набор правил переноса строк.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: inherit;
line-break: initial;
4.3. Расстановка переносов: свойство hyphens

Свойство hyphens определяет, разрешено ли использование переносов для создания возможностей мягкого переноса внутри строки текста.

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

CSS Text Level 3 не определяет точные правила переноса слов, поэтому рекомендуется выбирать подходящие для языка точки переноса.

Свойство наследуется.

hyphens
Значения:
none Слова не переносятся, даже если символы внутри слова явно определяют возможности переноса.
manual Слова переносятся только в тех местах, где внутри слова есть символы, которые явно указывают на возможность переноса слов (специальный символ ­). Значение по умолчанию.
auto Слова могут быть разбиты на возможности переноса, определяемые автоматически соответствующим языку ресурсом переноса в дополнение к тем, которые явно указаны условным дефисом. Необходимо задать язык своего контента (например, используя HTML-атрибут lang или заголовок HTTP Content-Language), чтобы получить правильный автоматический перенос слов.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

hyphens: none;
hyphens: manual;
hyphens: auto;
hyphens: inherit;
hyphens: initial;
4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap

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

Свойство наследуется.

overflow-wrap, word-wrap
Значения:
normal Неразрывные строки могут разрываться только в разрешенных точках разрыва. Значение по умолчанию.
break-word
anywhere Неразрывная последовательность символов может быть разбита в произвольной точке, если в строке нет других приемлемых точек разрыва. Влияет только на визуальное отображение, не затрагивая исходный текст. В точке разрыва строки символ переноса не добавляется. Возможности мягкого переноса, представленные в любом месте, учитываются при расчете собственных размеров минимального содержимого.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
overflow-wrap: inherit;
overflow-wrap: initial;

5. Выравнивание и выключка строк

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

5.1. Краткая запись для выравнивания текста: свойство text-align

Блок текста представляет собой набор линейных блоков. Свойство text-align задает свойства text-align-all и text-align-last и описывает, как блоки на уровне строки в каждом линейном блоке выравниваются относительно начальной и конечной сторон линейного блока. Значения, отличные от justify-all или match-parent, присваиваются text-align-all и сбрасываются в text-align-last на auto.

Свойство наследуется.

text-align
Значения:
start Содержимое на уровне строки выравнивается по начальному краю линейного блока. Значение по умолчанию.
end Содержимое на уровне строки выравнивается по конечному краю линейного блока.
left Содержимое на уровне строки выравнивается по левому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста.
right Содержимое на уровне строки выравнивается по правому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста.
center Содержимое на уровне строки центрируется внутри линейного блока.
justify Текст выравнивается по ширине линейного блока, чтобы точно заполнить поле строки, прижимаюсь к левому и правому краям родительского элемента. Если иное не указано в text-align-last, последняя строка перед принудительным разрывом или конец блока выравнивается по началу. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами.
justify-all Устанавливает text-align-all и text-align-last в justify, также выравнивая последнюю строку.
match-parent Значение ведет себя так же, как inherit за исключением того, что унаследованное значение start или end интерпретируется относительно значения direction (или исходного содержащего блока, если нет родителя) и приводит к вычисленному значению left или right.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;
text-align: inherit;
5.2. Выравнивание текста по умолчанию: свойство text-align-all

Свойство text-align-all — сокращенный вариант свойства text-align определяет выравнивание всех строк содержимого в контейнере блока, за исключением последних строк, переопределенных значением text-align-last. Принимает значения start, end, left, right, center, justify и match-parent.

Свойство наследуется.

Синтаксис

text-align-all: start;
text-align-all: end;
text-align-all: left;
text-align-all: right;
text-align-all: center;
text-align-all: justify;
text-align-all: match-parent;
text-align-all: inherit;
5.3. Выравнивание последней строки: свойство text-align-last

Свойство text-align-last описывает, как выравнивается последняя строка блока или строки непосредственно перед принудительным разрывом строки.

Если задано значение auto, содержимое в соответствующей строке выравнивается по text-align-all, если только для text-align-all не настроено justify — в этом случае оно выравнивается по началу блока. Все остальные значения интерпретируются как описано для text-align.

Принимает значения auto, start, end, left, right, center, justify и match-parent.

Свойство наследуется.

Синтаксис

text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;
text-align-last: match-parent;

6. Промежутки

CSS позволяет контролировать промежутки между словами и типографскими символами с помощью свойств word-spacing и letter-spacing.

6.1. Промежутки между словами: свойство word-spacing

Свойство word-spacing определяет дополнительный интервал между словами.
Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.

На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине.

Свойство наследуется.

word-spacing
Значения:
normal Дополнительный интервал не применяется. Вычисляет в 0. Значение по умолчанию.
длина Задает дополнительный интервал в дополнение к внутреннему интервалу между словами, определенному шрифтом. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

word-spacing: normal;
word-spacing: 1px;
word-spacing: 0.2em;
word-spacing: 50%;
word-spacing: inherit;
word-spacing: initial;
6.2. Трекинг: свойство letter-spacing

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

Свойство наследуется.

letter-spacing
Значения:
normal Дополнительный интервал не применяется. Вычисляет в 0. Значение по умолчанию.
длина Определяет дополнительный интервал между типографскими символами. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

letter-spacing: normal;
letter-spacing: 0.1em;
letter-spacing: 2px;
letter-spacing: inherit;
letter-spacing: initial;

7. Отступ первой строки: свойство text-indent

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

Свойство наследуется.

text-indent
Значение:
длина/% Размер отступа в виде абсолютной длины. Процентное значение вычисляется от собственной логической ширины блока-контейнера. Значение по умолчанию 0.
each-line Отступы затрагивают первую строку каждого блока-контейнера и каждую строку после принудительного разрыва строки (но не строки после с мягким переносом).
hanging Обратное преобразование. Все строки, кроме первой, будут с отступом.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

text-indent: 5mm;
text-indent: 20px;
text-indent: 5%;
text-indent: 2em each-line;
text-indent: 2em hanging;
text-indent: inherit;
text-indent: initial;

По материалам CSS Text Module Level 3

html5book.ru

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

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