letter-spacing
Свойство letter-spacing определяет межбуквенное расстояние в тексте.
Интерактивный пример
Синтаксис
/* Значения - ключевые слова */ letter-spacing: normal; /* Значения */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: 0.3px; /* Глобальные значения */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset;
Значения
Стандартное межбуквенное расстояние для текущего шрифта. В отличие от значения 0 , это ключевое слово позволяет агенту пользователя изменить расстояние между буквами для выравнивания текста.
Определяет дополнительное расстояние между буквами добавляющееся к стандартному расстоянию между символами. Значение может быть отрицательным, но при этом могут быть ограничения, зависящие от конкретной реализации. Агент пользователя может не увеличивать или уменьшать межбуквенное расстояние для выравнивания текста.
Формальный синтаксис
Примеры
HTML
p class="normal">letter spacingp> p class="em-wide">letter spacingp> p class="em-wider">letter spacingp> p class="em-tight">letter spacingp> p class="px-wide">letter spacingp>
CSS
.normal letter-spacing: normal; > .em-wide letter-spacing: 0.4em; > .em-wider letter-spacing: 1em; > .em-tight letter-spacing: -0.05em; > .px-wide letter-spacing: 6px; >
Результат
Проблемы доступности
Большие положительные или отрицательные значения свойства letter-spacing могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойства, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы.
Межбуквенное расстояние должно быть определено индивидуально для каждого случая, так как в разных семействах шрифтов ширина символов различна. Нет какого-то универсального значения, которое может быть применено для наилучшего отображения во всех семействах шрифтов.
- MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
- Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
Спецификации
| Specification |
|---|
| CSS Text Module Level 3 # letter-spacing-property |
| Начальное значение | normal |
|---|---|
| Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
| Наследуется | да |
| Обработка значения | оптимальное значение состоит из абсолютной длины или ключевого слова normal |
| Animation type | длина |
Браузерная совместимость
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Как задать расстояние между словами в css
Расстояние между словами (свойство word-spacing) | CSS
Между словами используется символ пробела. Положительное значение свойства word-spacing задаёт к пробелу дополнительное расстояние, тем самым увеличивая отступ между словами. Отрицательное значение, наоборот, уменьшает.
Значение word-spacing в процентах устанавливает дополнительное расстояние между словами в процентах от длины символа пробела. Скоро будет поддерживаться браузерами.
Отступы между inline или inline-block элементами
Если два и более пробела идут подряд и не являются неразрывными, то они показываются как один. Знак переноса на новую строку также является пробельным символом. Например, «слово в слово про слово» в исходном коде выглядит так:
Поведение inline и inline-block элементов то же как и у слов вне тегов, на них распространяются те же правила и свойства CSS [подробнее]. Например, « слово в слово про слово » .
Межсимвольный, межстрочный интервал CSS. Расстояние между словами
Работая со стилем для текста, вы можете устанавливать необходимые расстояния между символами, словами и строками. Задаются такие расстояния в любых единицах измерения CSS, будь-то px , pt , em или другое. Исключением являются проценты – с их помощью можно задать расстояние между строками (интерлиньяж), но они не работают при установке интервала между символами или словами.
Межсимвольный интервал CSS: letter-spacing
Задать межсимвольный интервал можно с помощью свойства CSS letter-spacing. Помимо обычных значений (положительных и отрицательных) также можно использовать значения inherit (чтобы наследовать значение у родителя) и normal (если необходимо вернуть нормальное расстояние между символами).
Пример записи межсимвольного интервала:
Интервал между словами: word-spacing
Свойство CSS word-spacing отличается от предыдущего тем, что устанавливает расстояние между словами, а не между символами. Для данного свойства тоже предусмотрены значения normal и inherit . Можно задавать отрицательные значения. Ниже показан пример записи стиля:
Межстрочный интервал: line-height
С помощью свойства CSS line-height можно задавать расстояние между строками текста. Как было сказано в начале темы, для установки интерлиньяжа, помимо других единиц измерения, допускается использовать проценты. Также разрешено записывать значение в виде множителя (числа больше 0): для вычисления расстояния браузер умножит размер шрифта на заданное число. Отрицательные значения не работают. Доступны значения normal и inherit .
Ниже – пример, как сделать межстрочный интервал CSS:
На скриншоте можно увидеть, как выглядит текст со всеми тремя свойствами:
Скриншот: интервалы в CSS
Итоги
Устанавливая интервал между словами, символами или строками, в первую очередь следите за тем, чтобы текст в итоге был легко читаем. С подобными свойствами необходимо обращаться аккуратно и всегда использовать их в меру, без фанатизма, иначе все текстовое содержимое грозит превратиться в неразборчивый набор букв.
word-spacing
Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing .
Синтаксис
word-spacing: | normal | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима.
normal Устанавливает интервал между словами как обычно. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства word-spacing
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Расстояние между словами в css
Есть список, который превращается в горизонтальное меню.
Превращается он хорошо, но мне нужны большие отступы между словами.
word-spacing не работает, только padding .
Проблема в том, что справа и слева тоже вставляются отступы, то есть слова «Главная» и «Карта сайта» отходят от крайних границ. Как можно исправить?
Задать отступы между ссылками можно так padding-right: 30px
Запретить перенос строки можно так white-space: nowrap
Отступы между словами задаются так word-spacing: 20px в родительском элементе. Но тогда и ссылка карта__сайта будет иметь отступ
Вместо padding можно указать margin-left: 30px с float: left
Похожие публикации:
- Как обратиться к дочернему элементу css
- Как обрезать картинку с помощью css
- С чего начать изучение node js
- Сколько форм может содержать проект visual basic
Как изменить расстояние между словами в css
Расстояние между словами (свойство word-spacing) | CSS
Между словами используется символ пробела. Положительное значение свойства word-spacing задаёт к пробелу дополнительное расстояние, тем самым увеличивая отступ между словами. Отрицательное значение, наоборот, уменьшает.
Значение word-spacing в процентах устанавливает дополнительное расстояние между словами в процентах от длины символа пробела. Скоро будет поддерживаться браузерами.
Отступы между inline или inline-block элементами
Если два и более пробела идут подряд и не являются неразрывными, то они показываются как один. Знак переноса на новую строку также является пробельным символом. Например, «слово в слово про слово» в исходном коде выглядит так:
Поведение inline и inline-block элементов то же как и у слов вне тегов, на них распространяются те же правила и свойства CSS [подробнее]. Например, « слово в слово про слово » .
word-spacing
Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing .
Синтаксис
word-spacing: | normal | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима.
normal Устанавливает интервал между словами как обычно. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства word-spacing
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Расстояние между словами в css
Есть список, который превращается в горизонтальное меню.
Превращается он хорошо, но мне нужны большие отступы между словами.
word-spacing не работает, только padding .
Проблема в том, что справа и слева тоже вставляются отступы, то есть слова «Главная» и «Карта сайта» отходят от крайних границ. Как можно исправить?
Задать отступы между ссылками можно так padding-right: 30px
Запретить перенос строки можно так white-space: nowrap
Отступы между словами задаются так word-spacing: 20px в родительском элементе. Но тогда и ссылка карта__сайта будет иметь отступ
Вместо padding можно указать margin-left: 30px с float: left
Как изменить расстояние между буквами и словами в CSS?
Наверняка у каждого из вас возникали ситуации, когда при верстке вам нужно было разместить в блоке какой-либо текст, но он в него не вмещался, или наоборот, был слишком маленьким по объему, и в блоке оставалось слишком много пустого места.
Навигация по статье:
В таких случаях можно попробовать различные методы выхода из положения. Например, можно поменять размер шрифта, урезать текст или изменить размер блока. Но если ни один из этих вариантов не подходят, то остается только поменять расстояние между буквами и расстояние между словами в CSS.
Как поменять расстояние между буквами CSS?
Чтобы изменить межбуквенный интервал в CSS мы можем использовать свойство letter-spacing. По умолчанию браузеры устанавливают межбуквенный интервал, основываясь на типе выбранного шрифта и его параметров. С помощью данного свойства мы можем задать расстояние между буквами для текста css в конкретном элементе.
Свойство letter-spacing может принимать три значения:
- Числовое значение – можно задать интервал в любых доступных для css единицах измерения (px, in, pt, em, ex), а так же можно задавать как положительные, так и отрицательные значения.
- normal – задает расстояние между буквами css для текста по умолчанию (0.25em)
- inherit – параметры межбуквенного интервала в css будут наследоваться от родительского элемента.
Например:
Как мы можем его использовать? Например, у меня четыре одинаковых блока с текстом, в оном блоке текст как раз подобран по размеру, а в остальных трех фрагменты текста значительно меньше, но изменить размеры блоков нельзя.
Для первых трех блоков можно попробовать увеличить расстояние между буквами css, и тем самым сделать его немного объемнее. В файле стилей, для абзацев в классах первых трех элементов пишем следующие свойства:
Похожие публикации:
- Как округлить рамку в css
- Как отключить hover css
- Сколько стоит earphones 2 basic
- Что css
Как сделать отступ между словами в css
Обычно про наборе текста для формирования пространства между словами используется пробел. Иногда это расстояние необходимо скорректировать. В CSS существует свойство word-spacing положительное значение которого прибавит к текущему пробелу указанное значение, тем самым увеличивая отступ между словами, и отрицательное, соответственно — убавит.
Пример ниже добавит к каждому пробелу дополнительные 15px.
Добавим к словам дополнительный отступ
p word-spacing: 15px; >