Div style word spacing

The word-spacing CSS property sets the length of space between words and between tags.

Try it

Syntax

/* Keyword value */
word-spacing: normal;

/* <length> values */
word-spacing: 3px;
word-spacing: 0.3em;

/* Global values */
word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: revert-layer;
word-spacing: unset;

Values

normal

The normal inter-word spacing, as defined by the current font and/or the browser.

<length>

Specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font.

Examples

HTML

<div id="mozdiv1">Lorem ipsum dolor sit amet.</div>
<div id="mozdiv2">Lorem ipsum dolor sit amet.</div>

CSS

#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}

Accessibility concerns

A large positive or negative word-spacing value will make the sentences the styling is applied to unreadable. For text styled with a very large positive value, the words will be so far apart that it will no longer appear to be a sentence. For text styled with a large negative value, the words will overlap each other to the point where the beginning and end of each word is unrecognizable.

Legible word-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

  • MDN Understanding WCAG, Guideline 1.4 explanations
  • Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0

Formal definition

Initial value normal
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited yes
Percentages refer to the width of the affected glyph
Computed value absolute <length>
Animation type a length

Formal syntax

word-spacing = 
normal |
<length>

Specifications

Specification
CSS Text Module Level 3
# word-spacing-property

Browser compatibility

BCD tables only load in the browser

See also

Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing.

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

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

Синтаксис

word-spacing: <размер> | normal

Синтаксис

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

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Допустимо использовать отрицательное значение, но читаемость текста может при этом снизиться. Процентная запись запрещена.

normal
Устанавливает интервал между словами как обычно.

Песочница

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

div {
  word-spacing: {{ playgroundValue }}px;
}

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>word-spacing</title>
<style>
.tel {
word-spacing: 10px;
font-size: 2em;
}
</style>
</head>
<body>
<p class=»tel»>Тел.: 555-221-061</p>
</body>
</html>

В данном примере задаётся фиксированное расстояние между номером телефона и текстом (рис. 1).

Применение свойства word-spacing

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

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

Объект.style.wordSpacing

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

Спецификация Статус
CSS Text Level 3 Рабочий проект
CSS Transitions Рабочий проект
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

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

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

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

Браузеры

6 12 1 3.5 1 1

Браузеры

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

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

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

normal
0
initial
normal
inherit
наследует значение родителя
unset
наследует значение родителя

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

<style>
div {
  word-spacing: normal;
}
</style>

<div>Свойство <code>word-spacing</code> наследуется, применяется ко всем элементам, изменяет текст и строчные элементы</div>

Что такое word-spacing CSS

Между словами используется символ пробела. Положительное значение свойства word-spacing задаёт к пробелу дополнительное расстояние, тем самым увеличивая отступ между словами. Отрицательное значение, наоборот, уменьшает.

Значение word-spacing в процентах устанавливает дополнительное расстояние между словами в процентах от длины символа пробела.

Отступы между inline или inline-block элементами

Если два и более пробела идут подряд и не являются неразрывными, то они показываются как один. Знак переноса на новую строку также является пробельным символом. Например, «слово в слово
про
слово» в исходном коде выглядит так:

«слово в      слово
про
      слово»

Изменить это поведение можно с помощью свойства white-space. У тега <pre> по умолчанию white-space имеет значение pre и моноширинный шрифт.

Отступ/выступ первой строки в абзаце можно установить с помощью свойства text-indent.

Те же правила и свойства CSS распространяются и на inline и inline-block элементы [подробнее]. Например, «слово в слово
про
слово»
.

<style>
span {
  display: inline-block;
  padding: .5em;
  border: 1px solid green;
  background-color: #fff5d7;
}
</style>

«<span>слово</span> <span>в</span>      <span>слово</span>
<span>про</span>
      <span>слово</span>»

Как убрать расстояние между inline-block элементами

<style>
li {
  display: inline-block;
  padding: .5em;
  border: 1px solid green;
  background-color: #fff5d7;
}
</style>

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Вариант 1. Удалить символ пробела

<style>
li {
  display: inline-block;
  padding: .5em;
  border: 1px solid green;
  background-color: #fff5d7;
}
</style>

<ol>
  <li></li><li></li><li></li><li></li><li></li>
</ol>

В HTML5 для некоторых элементов закрывающийся тег может быть опущен. [whatwg.org] Предполагается, что он присутствует перед следующим указанным в спецификации тегом (скажем, </li> прижат без промежутка к следующему <li> или к закрывающемуся тегу родительского элемента).

<style>
li {
  display: inline-block;
  padding: .5em;
  border: 1px solid green;
  background-color: #fff5d7;
}
</style>

<ol>
  <li>
  <li>
  <li>
  <li>
  <li>
</ol>

Вариант 2. Задать отрицательное значение word-spacing родительскому элементу

<style>
ol {
  word-spacing: -100%;
}
li {
  display: inline-block;
  padding: .5em;
  border: 1px solid green;
  word-spacing: normal;
  background-color: #fff5d7;
}
</style>

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Как настроить интервал между inline-block элементами

Если строка начинается с пробела, то он игнорируется. При уменьшении ширины родителя, смещённый вниз inline-блок вплотную прижимается к границе предка. Что более предпочтительно, чем поведение margin.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
<style>
ol {
  border: 1px solid blue;
  padding: 0;
  overflow: auto;
  resize: horizontal;
}
ol li {
  display: inline-block;
  margin: 0;
  border: 1px solid green;
  padding: .5em;
  vertical-align: middle;
  background-color: #fff5d7;
}
ol:nth-of-type(1) {
  word-spacing: 4em; 
}
ol:nth-of-type(1) li { 
  word-spacing: normal;
}
ol:nth-of-type(2) li + li {
  margin-left: 4em;
}
</style>

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ol>
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ol>

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

Свойство word-spacing устанавливает интервал между словами.

Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing.

Демо¶

Текст

  • hanging-punctuation
  • hyphens
  • letter-spacing
  • line-break
  • overflow-wrap
  • paint-order
  • tab-size
  • text-align
  • text-align-last
  • text-indent
  • text-justify
  • text-size-adjust
  • text-transform
  • white-space
  • word-break
  • word-spacing
  • letter-spacing
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration-skip
  • text-decoration-skip-ink
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-indent
  • text-rendering
  • text-shadow
  • text-underline-position
  • text-transform
  • white-space
  • word-spacing

Синтаксис¶

/* Keyword value */
word-spacing: normal;

/* <length> values */
word-spacing: 3px;
word-spacing: 0.3em;

/* <percentage> values */
word-spacing: 50%;
word-spacing: 200%;

/* Global values */
word-spacing: inherit;
word-spacing: initial;
word-spacing: unset;

Значения¶

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима.

normal
Устанавливает интервал между словами как обычно.

Значение по-умолчанию: normal

Применяется ко всем элементам

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

  • CSS Text Level 3
  • CSS Level 2 (Revision 1)
  • CSS Level 1

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>word-spacing</title>
    <style>
      .tel {
        word-spacing: 10px;
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <p class="tel">Тел.: 555-221-061</p>
  </body>
</html>

Text spacing and placement in CSS is controlled using the letter-spacing, word-spacing, line-height, and text-indent properties. Learn how to set text spacing and placement in the following steps.

  1. The letter-spacing property is used to specify the amount of space between letters. The amount indicated is in addition to the default spacing. The amount is specified in units. For example:
    <div style="letter-spacing: 1em;">It's a wide wide word!</div>
  2. The word-spacing property is used to specify the amount of space between words. The amount indicated is in addition to the default spacing. The amount is specified in units. For example:
    <div style="word-spacing: 1em;">It's a wide wide sentence!</div>
  3. The line-height property is used to specify the amount of vertical space between lines of text. The line-height can be specified in number of units, percentage, or with a multiplier.
    <div style="line-height: 1.5;">
  4. The text-indent property is used to indent (or outdent) the first line of a block of text. The value can be specified in number of units or in percentage of the width of the containing block.
    <div style="text-indent: 50px;">
  5. The following code sample shows all of these properties in use:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Spacing and Line Height</title>
    </head>
    <body>
    <div style="margin-left: 300px;">
    <h1>Spacing and Line Height</h1>
    
    <h2>Letter Spacing</h2>
    <div style="letter-spacing: 1em;">letter-spacing: 1em</div>
    <div style="letter-spacing: -1em;">letter-spacing: -1em</div>
    
    <h2>Word Spacing</h2>
    <div style="word-spacing: 1em;">word-spacing: 1em</div>
    <div style="word-spacing: 1em;">It's a wide wide sentence.</div>
    
    <h2>Line Height</h2>
    <div style="line-height: 1.5;">
    	line-height: 1.5<br>
    	line-height: 1.5<br>
    	line-height: 1.5
    </div>
    <div style="line-height: 150%;">
    	line-height: 150%<br>
    	line-height: 150%<br>
    	line-height: 150%
    </div>
    <div style="line-height: 1.5em;">
    	line-height: 1.5em<br>
    	line-height: 1.5em<br>
    	line-height: 1.5em
    </div>
    <h2>Text-Indent</h2>
    <div style="text-indent: 50px;">
    	text-indent:50px - text-indent only applies to the first line of text.<br>
    	The next lines will not be indented.
    </div>
    <div style="text-indent: 10%;">
    	text-indent:10% - text-indent only applies to the first line of text.<br>
    	The next lines will not be indented.
    </div>
    </div>
    </body>
    </html>

The above code will render the following:Spacing and Placement

Like this post? Please share to your friends:
  • Div not word wrapping
  • Div do not word wrap
  • Div auto word wrap
  • Disturbed the best in the word
  • Distributional analyses of the word