Интервал между словами css: Как сделать отступ между словами в css

Leave a Comment / Css / By /

Расстояние между словами: word-spacing | CSS примеры

word-spacing
normal
0
em rem ex ch vh vw vmin vmax px mm cm in pt pc %
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>

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

Расстояние между словами в css

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

word-spacing не работает, только padding.

Проблема в том, что справа и слева тоже вставляются отступы, то есть слова «Главная» и «Карта сайта» отходят от крайних границ. Как можно исправить?

.bottom_menu {	
    margin: 0;
    -webkit-padding-start: 0;
}

.bottom_menu li {
    display: table-cell;
    text-transform: uppercase;
    font-family: verdana;
    color: white;
    font-size: 28px;
    padding: 12px 15px;
}
<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>
</ul>
2

Задать отступы между ссылками можно так padding-right: 30px

Запретить перенос строки можно так white-space: nowrap

Отступы между словами задаются так word-spacing: 20px в родительском элементе.

Но тогда и ссылка карта__сайта будет иметь отступ

Вместо padding можно указать margin-left: 30px с float: left

Убрать отступ у последнего элемента в списке можно в html через атрибут style
<li><a href="/">карта сайта</a></li>

или в css, используя псевдокласс :last-child

.bottom_menu {	
    margin: 0;
    padding: 0;
    // word-spacing: 20px;
}

.bottom_menu li {
    display: table-cell;
    text-transform: uppercase;
    font-family: verdana;
    color: white;
    font-size: 28px;
  
  padding-right: 30px;
  white-space: nowrap;
}

.bottom_menu li:last-child {
    padding-right: 0px;
}
<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>
</ul>

Не особо понял что нужно автору, может это? Чтобы растянуть меню на всю ширину страницы нужно добавить display: table; width: 100%, а чтобы убрать у первого и у последнего элементов отступы нужно добавить псевдоклассы :first-child и :last-child с нужными paddind, это сделано в примере ниже:

body {
  margin: 0;
  padding: 0;
}
. bottom_menu {
  margin: 0;
  padding: 0;
  display: table;
  width: 100%;
  background: #ccc;
}
.bottom_menu li {
  display: table-cell;
  text-transform: uppercase;
  font-family: verdana;
  color: white;
  font-size: 28px;
  padding: 12px 15px;
  white-space: nowrap;
}
.bottom_menu li:first-child {
  padding-left: 0;
}
.bottom_menu li:last-child {
  padding-right: 0;
}
<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>
</ul>
2

Добавляйте padding, а потом li:nth-last-child{padding:0}, ну и по аналогии для первого элемента

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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

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

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

Значения

нормальный

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

<длина>

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

HTML 

 
Lorem ipsum dolor sit amet. 


Lorem ipsum dolor sit amet.

CSS 

 #mozdiv1 {
  интервал между словами: 15px;
}
#mozdiv2 {
  интервал между словами: 5em;
}

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

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

  • MDN Понимание WCAG, пояснения к Руководству 1.4
  • Понимание критерия успеха 1. 4.8 | Понимание W3C WCAG 2.0
Исходное значение нормальный
Применяется ко всем элементам. Это также относится к ::first-letter и ::first-line .
Унаследовано да
Проценты относятся к ширине затронутого глифа
Расчетное значение Абсолютное значение <длина>
Тип анимации Длина
 межсловный интервал = 
 обычный |
Спецификация
Текстовый модуль CSS, уровень 3
# word-spacing-property

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

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

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

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

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

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

Расстояние между словами в CSS — javatpoint

следующий → ← предыдущая

Это свойство CSS используется для управления расстоянием между словами. Используя это свойство, мы можем увеличивать или уменьшать расстояние между словами.

Изменяет пробел между словами. Оно похоже на свойство letter-spacing , но вместо указания расстояния между отдельными символами это свойство CSS определяет расстояние между словами в фрагменте текста.

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

Синтаксис

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

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

нормальный: Это значение по умолчанию, которое определяет нормальное расстояние (0,25 em) между словами. Он используется для указания пространства, которое определяется браузером.

длина: Определяет дополнительный пробел между словами по длине ( pt, px, em, cm, и т.д.). Он допускает отрицательные значения.

инициал: Используется для установки значения свойства по умолчанию.

inherit: Он наследует значение от своего родительского элемента.

Пример

<голова> <название> Свойство CSS word-spacing <стиль> тело{ выравнивание текста: по центру; } #космос{ интервал между словами: 40px; } п{ красный цвет; вес шрифта: полужирный; размер шрифта: 20px; } <тело>

Свойство word-spacing

<дел>

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

Добро пожаловать на javaTpoint. com

<дел>

интервал между словами: 40px;

Добро пожаловать на javaTpoint.com

Протестируйте сейчас

Выход

Пример

<голова> <название> Свойство CSS word-spacing <стиль> тело{ выравнивание текста: по центру; } #космос{ интервал между словами: 2 см; } #пробел1{ интервал между словами: -50px; } #пробел2{ межсловный интервал: начальный; } п{ красный цвет; вес шрифта: полужирный; размер шрифта: 20px; } <тело>

Свойство word-spacing

<дел>

интервал между словами: 2 см;

Добро пожаловать на javaTpoint.com

<дел>

интервал между словами: -50px;

Добро пожаловать на javaTpoint.com

<дел>

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

Добро пожаловать на javaTpoint.

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

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