Содержание

white-space — CSS | MDN

Свойство white-space управляет тем, как обрабатываются пробельные символы внутри элемента.

Примечание: Для управления переносами внутри слов используйте overflow-wrap, word-break или hyphens.

/* Ключевые значения */
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;
white-space: unset;
Начальное значениеnormal
Применяется квсе элементы
Наследуетсяда
Обработка значениякак указано
Animation typediscrete

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

Значения

normal

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

nowrap

Объединяет последовательности пробелов в один пробел, как значение normal, но не переносит строки (оборачивание текста) внутри текста.

pre

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

<br>.

pre-wrap

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

pre-line

Последовательности пробелов объединяются в один пробел. Строки разбиваются по символам новой строки, по элементам

<br>, и при необходимости для заполнения строчных боксов..

break-spaces

Поведение идентично pre-wrap со следующими отличиями:

  • Последовательности пробелов сохраняются так, как они указаны в источнике, включая пробелы на концах строк.
  • Строки переносятся по любым пробелам, в том числе в середине последовательности пробелов.
  • Пробелы занимают место и не висят на концах строк, а значит влияют на внутренние размеры (min-content и max-content).

В приведённой ниже таблице указано поведение различных значений свойства white-space

:

Новые строкиПробелы и табуляцияПеренос текста по словамПробелы в конце строки
normalОбъединяются в однуОбъединяются в один пробелПереноситсяУдаляются
nowrapОбъединяются в однуОбъединяются в один пробелНе переноситсяУдаляются
preСохраняются как в источникеСохраняются как в источникеНе переноситсяСохраняются как в источнике
pre-wrapСохраняются как в источникеСохраняются как в источникеПереноситсяВисят
pre-lineСохраняются как в источникеОбъединяются в один пробелПереноситсяУдаляются
break-spacesСохраняются как в источникеСохраняются как в источникеПереноситсяПереносятся

Формальный синтаксис

white-space = 
normal        | (en-US)
pre           | (en-US)
nowrap        | (en-US)
pre-wrap      | (en-US)
break-spaces  | (en-US)
pre-line

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

code {
  white-space: pre;
}

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

<pre>
pre {
  word-wrap: break-word;      /* IE 5.
 
 5-7 */
  white-space: pre-wrap;      /* текущие браузеры */
}
Specification
CSS Text Module Level 3
# white-space-property

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.
Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Как убрать промежуток между пунктами горизонтального списка? | Рецепты

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

Пример 1. Горизонтальный список

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Горизонтальный список</title> <style> ul.hr { /* Обнуляем значение отступов и полей */ margin: 0; padding: 0; } ul.hr li { display: inline-block; /* Строчно-блочный элемент */ padding: 4px; /* Поля вокруг текста */ background: #0075b2; /* Цвет фона */ color: #fff; /* Цвет текста */ } </style> </head> <body> <ul> <li>Мчади</li> <li>Када на мацони</li> <li>Пахлава</li> <li>Кчуч</li> <li>Лилибдж</li> </ul> </body> </html>

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

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

Написание в одну строку

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

<ul> <li>Мчади</li><li>Када на мацони</li><li>Пахлава</li><li>Кчуч</li><li>Лилибдж</li> </ul>

Использование комментариев

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

<ul> <li>Мчади</li><!— —><li>Када на мацони</li><!— —><li>Пахлава</li><!— —><li>Кчуч</li><!— —><li>Лилибдж</li> </ul>

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

Нет закрывающих тегов

Если в коде списка убрать закрывающий тег </li>, то браузер добавит его самостоятельно перед открывающим тегом <li>, тем самым исключив перенос строк.

<ul> <li>Мчади <li>Када на мацони <li>Пахлава <li>Кчуч <li>Лилибдж </ul>

Размер шрифта

Предыдущие методы основывались на изменении кода HTML, что не всегда возможно или удобно. Стили позволяют решить нашу проблему, не затрагивая HTML. Одним из способов является изменение шрифта до 0. Для всего списка ul свойство font-size устанавливаем нулевым, а для пунктов списка восстанавливаем до значения 1rem (пример 2). Получается, что пробел станет символом со шрифтом нулевого размера и перестанет отображаться.

Пример 2. Использование font-size

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Горизонтальный список</title> <style> ul.hr { /* Обнуляем значение отступов и полей */ margin: 0; padding: 0; font-size: 0; } ul.hr li { display: inline-block; /* Строчно-блочный элемент */ padding: 4px; /* Поля вокруг текста */ background: #0075b2; /* Цвет фона */ color: #fff; /* Цвет текста */ font-size: 1rem; /* Размер текста */ } </style> </head> <body> <ul> <li>Мчади</li> <li>Када на мацони</li> <li>Пахлава</li> <li>Кчуч</li> <li>Лилибдж</li> </ul> </body> </html>

Использование float

Если промежутки между горизонтальными пунктами списка возникают из-за использования свойства display, то в данном случае можно от него отказаться в пользу других вариантов. Для горизонтального размещения элементов применяется старый известный метод, основанный на свойстве float. Пунктам списка задаём float со значением left, а для списка ul устанавливаем overflow со значением hidden (пример 3). Свойство overflow необходимо для ограничения действия float, которое продолжается и за пределами списка.

Пример 3. Использование float

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Горизонтальный список</title> <style> ul.hr { /* Обнуляем значение отступов и полей */ margin: 0; padding: 0; overflow: hidden; /* Отменяем действие float */ } ul.hr li { float: left; /* Выстраиваем по горизонтали */ list-style: none; /* Убираем маркеры списка */ padding: 4px; /* Поля вокруг текста */ background: #0075b2; /* Цвет фона */ color: #fff; /* Цвет текста */ } </style> </head> <body> <ul> <li>Мчади</li> <li>Када на мацони</li> <li>Пахлава</li> <li>Кчуч</li> <li>Лилибдж</li> </ul> </body> </html>

Использование flex

Современный и простой метод размещения пунктов списка по горизонтали основан на флексах. Достаточно для ul задать свойство display со значением flex и текст выстроится по горизонтали без лишних пробелов (пример 4).

Пример 4. Использование flex

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Горизонтальный список</title> <style> ul.hr { /* Обнуляем значение отступов и полей */ margin: 0; padding: 0; display: flex; /* Включаем флексы */ } ul.hr li { list-style: none; /* Убираем маркеры списка */ padding: 4px; /* Поля вокруг текста */ background: #0075b2; /* Цвет фона */ color: #fff; /* Цвет текста */ } </style> </head> <body> <ul> <li>Мчади</li> <li>Када на мацони</li> <li>Пахлава</li> <li>Кчуч</li> <li>Лилибдж</li> </ul> </body> </html>

Списки

См. также

  • <big>
  • display
  • display в CSS
  • float
  • float в CSS
  • font-size
  • Блочные элементы
  • Буквица
  • Влияние float
  • Выравнивание картинок
  • Единицы размера в CSS
  • Использование в вёрстке
  • Описание float
  • Открываем блочную модель
  • Подробнее о позиционировании
  • Поток
  • Примеры использования float
  • Размер текста
  • Свойства шрифта в CSS
  • Создание флексбоксов
  • Спойлер
  • Строчно-блочные элементы
  • Строчные элементы

letter-spacing — CSS: Каскадные таблицы стилей

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

 /* Значение ключевого слова */
межбуквенный интервал: нормальный;
/* значения <длины> */
межбуквенный интервал: 0.3em;
межбуквенный интервал: 3px;
межбуквенный интервал: 0,3 пикселя;
/* Глобальные значения */
межбуквенный интервал: наследовать;
межбуквенный интервал: начальный;
межбуквенный интервал: вернуться;
интервал между буквами: обратный слой;
межбуквенный интервал: не установлен;

Значения

нормальный

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

<длина>

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

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

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

  • MDN Понимание WCAG, пояснения к Руководству 1.4
  • Понимание критерия успеха 1.4.8 | Понимание W3C WCAG 2.0

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

شسيبتنمك

900 58
Исходное значение обычный
Применяется ко всем элементам. Это также относится к ::first-letter и ::first-line .
Унаследовано да
Вычисленное значение оптимальное значение, состоящее либо из абсолютной длины, либо из ключевого слова нормальный
Тип анимации длина
 расстояние между буквами = 
 нормальный |

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

HTML 
 
межбуквенный интервал


расстояние между буквами


расстояние между буквами


расстояние между буквами


расстояние между буквами
CSS 
 . нормальный {
  межбуквенный интервал: нормальный;
}
.em-широкий {
  межбуквенный интервал: 0.4em;
}
.em-шире {
  межбуквенный интервал: 1em;
}
.em-tight {
  межбуквенный интервал: -0,05em;
}
.px-ширина {
  межбуквенный интервал: 6px;
}
Результат
9 0096
Спецификация
Текстовый модуль CSS, уровень 3
# свойство letter-spacing

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

  • кернинг шрифта
  • межсловный интервал

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с контентом.
  • Посмотреть исходный код на GitHub.
Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

Space Between — Tailwind CSS

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

​Добавить горизонтальное пространство между дочерними элементами

Управление горизонтальным пространством между элементами с помощью утилит space-x-{amount} .

01

02

03

 <дел>
  <дел>01
  <дел>02
  
03

​Добавить вертикальное пространство между дочерними элементами

Управление вертикальным пространством между элементами с помощью утилит space-y-{amount} .

01

02

03

 <дел>
  <дел>01
  <дел>02
  
03