Word spacing в html это

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

Источник
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

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

Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/text.html#propdef-word-spacing

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

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

Значения

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

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>word-spacing</title>
  <style>
   p {
    word-spacing: 20px;
   } 
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>

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

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

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

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

CSS по теме

Статьи по теме

Статьи по теме

Рецепты CSS

Источник

Устанавливает интервал между словами. Если для текста задано выравнивание через 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

Браузеры

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

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

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

Источник

Свойство 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>
Источник

word-spacing

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

Try it

Syntax

word-spacing: normal;


word-spacing: 3px;
word-spacing: 0.3em;


word-spacing: 50%;
word-spacing: 200%;


word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: revert-layer;
word-spacing: unset;

Values

normal

Обычный межсловесный интервал,определяемый текущим шрифтом и/или браузером.

<length>

Указывает дополнительный интервал в дополнение к внутреннему интервалу между словами,определяемому шрифтом.

<percentage>

Задает дополнительное расстояние между символами в процентах от ширины забегающего символа.

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

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

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

  • MDN Понимание СППН,Руководящий принцип 1.4 пояснения
  • Понимание Критерий успеха 1.4.8 | W3C Понимание ВКПГ 2.0

Formal definition

Formal syntax

word-spacing =   normal    |  <length>

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet
word-spacing

1

12

1

6

3.5

1

4.4

18

4

14

1

1.0
percentages

No

No

45

No

No

7

No

No

45

No

7

No
svg

1

12

72

9

7

5.1

≤37

18

No

14

5

1.0

See also

  • letter-spacing

CSS

  • will-change

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

  • word-break

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

  • writing-mode

    Свойство CSS writing-mode устанавливает,будут ли строки текста располагаться горизонтально вертикально,а также направление,в котором будут двигаться блоки.

  • z-index

    CSS-свойство z-index задает z-порядок позиционированного элемента и его потомков-гибких элементов.

Источник

Понравилась статья? Поделить с друзьями:
  • Word spacing in between letters and words
  • Word start from k in english
  • Word start from blow
  • Word start and end with same letter
  • Word stands for each letter