Css какое свойство увеличивает или уменьшает пробел между словами
Категория: Уроки CSS
Просмотров: 6371
Коментариев: 0
Дата: 2018-08-12
Добавил: admin
И так, продолжаем изучать инструменты CSS для оформления текста, и в этом уроке мы рассмотрим еще четыре свойства для текста, которые нужно знать, и которые часто применяются на практике.
- line-height: 35px ; – Устанавливает межстрочный интервал
- word-spacing: 15px ; – Интервал между словами
- letter-spacing: 4px ; – Интервал между буквами
- text-transform: uppercase/ lowercase/ capitalize ; – Изменение регистра букв
Межстрочный интервал
Первое свойство, которое мы рассмотрим – это свойство задающие межстрочный интервал. Для этого используется свойство line-height: ;.
Благодаря этому свойству мы можем менять расстояние между двумя базовыми линиям шрифта показанными на рисунке. Базовая линия это линия, на которой стоят буквы. Соответственно, когда располагаются две строки, у каждой строки есть своя базовая линия и расстояние между ними задается как раз, именно, с помощью свойства line-height: ;. Данное расстояние браузер задает самостоятельно в зависимости от размера шрифта.
И теперь, давайте попробуем применить данное свойство на практике, т.е. для всех абзацев принудительно зададим другое межстрочное расстояние то, которое нам нужно.
HTML
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “https://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>HTML страница</title>
<link href=”css/fonts.css” type=”text/css” rel=”stylesheet”>
</head>
<body>
Меняем расстояние между строками с помощью свойства line-height: ;
Меняем расстояние между строками с помощью свойства line-height: ;
Меняем расстояние между строками с помощью свойства line-height: ;
Меняем расстояние между строками с помощью свойства line-height: ;
</body>
</html>
И, ниже зададим то самое наше свойство, которое и будет менять расстояние между строками.
CSS
p{
line-height: 25px;
}
Если Вы задали данное свойство и обновили страницу то заметили, что расстояние между строками изменилось.
Также можно увеличивать или уменьшать расстояние между строками с помощью множителя. Если мы используем в качестве значения просто число без обозначений >line-height: 2 ;, то браузер будет воспринимать его как множитель от текущего размера шрифта. То есть, если указана цифра два, то это будет обозначать, что браузеру нужно взять текущий размер шрифта и умножить его на два, что в итоге даст 28px. Это и будет расстояние между базовыми линиями шрифта.
Использование множителя удобно тем, что при изменении шрифта расстояние между строк так же измениться пропорционально. Таким образом, расстояние между строк можно регулировать множителем либо любым другим фиксированным значением px, %, em, pt.
Интервал между словами
Следующее свойство, которое мы рассмотрим это свойство word-spacing: ;, позволяющее изменять расстояние между словами. В этом свойстве используются фиксированные значения, и, уже проценты здесь не подходят.
Теперь давайте, для тех же абзацев, с помощью данного свойства увеличим расстояние между словами.
CSS
p{
word-spacing: 15px;
}
Теперь если обновить страницу то между словами увеличится расстояние на 15px.
Имейте ввиду, что если задать свойство text-align: justify; – выравнивание текста по ширине, то свойство word-spacing: ; браузером будет игнорироваться.
Интервал между буквами
Свойство letter-spacing: ; не так актуально и при больших объемах текста редко используется, так как браузер автоматически выбирает оптимальное расстояние между буквами. В основном, применяется это свойство при использовании больших шрифтов в одном двух словах.
В этом свойстве так же используются фиксированные значения, которые могут и отрицательными. Задается данное свойство следующим образом.
HTML
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “https://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>HTML страница</title>
<link href=”css/fonts.css” type=”text/css” rel=”stylesheet”>
</head>
<body>
</body>
</html>
И задаем само свойство.
CSS
h1{
letter-spacing: 3px;
letter-spacing: -3px;
}
Изменение регистра букв
И, четвертое свойство – это text-transform: ;. Данное свойство изменяет регистр букв.
Бывают такие моменты, когда нужно написать какое-то слово полностью из заглавных букв. Для таких случаев и используется свойство text-transform: ;. Чаще всего используется данное свойство для заголовков.
Написать слово большими буквами можно и напрямую в HTML, но как уже знаем HTML – это только разметка, а оформление создается через таблицу стилей CSS. Поэтому, для этого и используется именно CSS.
HTML
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “https://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>HTML страница</title>
<link href=”css/fonts.css” type=”text/css” rel=”stylesheet”>
</head>
<body>
</body>
</html>
Для формирования заглавных букв свойству text-transform: ; задается значение uppercase, что означает upper – верхний и case – регистр.
CSS
H1{
text-transform:uppercase ;
}
Задав такое свойство все заголовки H1 будут отображены в верхнем регистре.
Точно так же, можно и написать слово из маленьких букв, для этого используется значение lowercase, где lower – обозначает нижний и case – регистр.
CSS
H1{
text-transform: lowercase;
}
И, если теперь обновить страницу, то все буквы будут отображены в нижнем регистре.
И, рассмотрим еще один вариант применения этого свойства, это когда каждое слово необходимо начинать с прописной буквы. Для этого существует значение capitalize, указав его в качестве параметра данного свойства, все первые буквы в каждом слове будут заглавными.
CSS
H1{
text-transform: capitalize;
}
Вот, мы и рассмотрели еще четыре свойства относящиеся к тексту. В демо можно просмотреть результат работы, каждого из этих свойств.
На этом все, мы рассмотрели все основные свойства, позволяющие нам изменять внешний вид текста.
Источник
ÐдÑавÑÑвÑйÑе, доÑогие поÑеÑиÑели!
ÐавеÑнÑка Ñ ÐºÐ°Ð¶Ð´Ð¾Ð³Ð¾ из Ð²Ð°Ñ Ð²Ð¾Ð·Ð½Ð¸ÐºÐ°Ð»Ð¸ ÑиÑÑаÑии, когда пÑи веÑÑÑке вам нÑжно бÑло ÑазмеÑÑиÑÑ Ð² блоке какой-либо ÑекÑÑ, но он в него не вмеÑалÑÑ, или наобоÑоÑ, бÑл ÑлиÑком маленÑким по обÑемÑ, и в блоке оÑÑавалоÑÑ ÑлиÑком много пÑÑÑого меÑÑа.
Ð ÑÐ°ÐºÐ¸Ñ ÑлÑÑаÑÑ Ð¼Ð¾Ð¶Ð½Ð¾ попÑобоваÑÑ ÑазлиÑнÑе меÑÐ¾Ð´Ñ Ð²ÑÑ Ð¾Ð´Ð° из положениÑ. ÐапÑимеÑ, можно поменÑÑÑ ÑÐ°Ð·Ð¼ÐµÑ ÑÑиÑÑа, ÑÑезаÑÑ ÑекÑÑ Ð¸Ð»Ð¸ измениÑÑ ÑÐ°Ð·Ð¼ÐµÑ Ð±Ð»Ð¾ÐºÐ°. Ðо еÑли ни один из ÑÑÐ¸Ñ Ð²Ð°ÑианÑов не Ð¿Ð¾Ð´Ñ Ð¾Ð´ÑÑ, Ñо оÑÑаеÑÑÑ ÑолÑко поменÑÑÑ ÑаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ Ð±Ñквами и ÑаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ Ñловами в CSS.
Ðак поменÑÑÑ ÑаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ Ð±Ñквами CSS?
ЧÑÐ¾Ð±Ñ Ð¸Ð·Ð¼ÐµÐ½Ð¸ÑÑ Ð¼ÐµÐ¶Ð±ÑквеннÑй инÑеÑвал в CSS Ð¼Ñ Ð¼Ð¾Ð¶ÐµÐ¼ иÑполÑзоваÑÑ ÑвойÑÑво letter-spacing. Ðо ÑмолÑÐ°Ð½Ð¸Ñ Ð±ÑаÑзеÑÑ ÑÑÑанавливаÑÑ Ð¼ÐµÐ¶Ð±ÑквеннÑй инÑеÑвал, оÑновÑваÑÑÑ Ð½Ð° Ñипе вÑбÑанного ÑÑиÑÑа и его паÑамеÑÑов. С помоÑÑÑ Ð´Ð°Ð½Ð½Ð¾Ð³Ð¾ ÑвойÑÑва Ð¼Ñ Ð¼Ð¾Ð¶ÐµÐ¼ задаÑÑ ÑаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ Ð±Ñквами Ð´Ð»Ñ ÑекÑÑа css в конкÑеÑном ÑлеменÑе.
СвойÑÑво letter-spacing Ð¼Ð¾Ð¶ÐµÑ Ð¿ÑинимаÑÑ ÑÑи знаÑениÑ:
- ЧиÑловое знаÑение â можно задаÑÑ Ð¸Ð½ÑеÑвал в лÑбÑÑ Ð´Ð¾ÑÑÑпнÑÑ Ð´Ð»Ñ css единиÑÐ°Ñ Ð¸Ð·Ð¼ÐµÑÐµÐ½Ð¸Ñ (px, in, pt, em, ex), а Ñак же можно задаваÑÑ ÐºÐ°Ðº положиÑелÑнÑе, Ñак и оÑÑиÑаÑелÑнÑе знаÑениÑ.
- normal â Ð·Ð°Ð´Ð°ÐµÑ ÑаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ Ð±Ñквами css Ð´Ð»Ñ ÑекÑÑа по ÑмолÑÐ°Ð½Ð¸Ñ (0.25em)
- inherit â паÑамеÑÑÑ Ð¼ÐµÐ¶Ð±Ñквенного инÑеÑвала в css бÑдÑÑ Ð½Ð°ÑледоваÑÑÑÑ Ð¾Ñ ÑодиÑелÑÑкого ÑлеменÑа.
ÐапÑимеÑ:
letter-spacing: 3px;
Ðак Ð¼Ñ Ð¼Ð¾Ð¶ÐµÐ¼ его иÑполÑзоваÑÑ? ÐапÑимеÑ, Ñ Ð¼ÐµÐ½Ñ ÑеÑÑÑе одинаковÑÑ Ð±Ð»Ð¾ÐºÐ° Ñ ÑекÑÑом, в оном блоке ÑекÑÑ ÐºÐ°Ðº Ñаз подобÑан по ÑазмеÑÑ, а в оÑÑалÑнÑÑ ÑÑÐµÑ ÑÑагменÑÑ ÑекÑÑа знаÑиÑелÑно менÑÑе, но измениÑÑ ÑазмеÑÑ Ð±Ð»Ð¾ÐºÐ¾Ð² нелÑзÑ.
ÐÐ»Ñ Ð¿ÐµÑвÑÑ ÑÑÐµÑ Ð±Ð»Ð¾ÐºÐ¾Ð² можно попÑобоваÑÑ ÑвелиÑиÑÑ ÑаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ Ð±Ñквами css, и Ñем ÑамÑм ÑделаÑÑ ÐµÐ³Ð¾ немного обÑемнее. Ð Ñайле ÑÑилей, Ð´Ð»Ñ Ð°Ð±Ð·Ð°Ñев в клаÑÑÐ°Ñ Ð¿ÐµÑвÑÑ ÑÑÐµÑ ÑлеменÑов пиÑем ÑледÑÑÑие ÑвойÑÑва:
.row15 .first p, .row15 .second p, .row15 .third p{ letter-spacing:0.2ex; } |
РиÑоге Ð²Ð¾Ñ ÑÑо полÑÑилоÑÑ:
ÐизÑалÑно видно, ÑÑо ÑаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ Ð±Ñквами ÑвелиÑилиÑÑ, но ÑÑого не доÑÑаÑоÑно.
ÐнÑеÑвал Ð¼ÐµÐ¶Ð´Ñ Ð±Ñквами ÑвелиÑиваÑÑ Ð±Ð¾Ð»ÑÑе не ÑÑоиÑ, Ñак как ÑÑо оÑÑиÑаÑелÑно ÑкажеÑÑÑ Ð½Ð° внеÑнем виде. ÐоÑÑÐ¾Ð¼Ñ Ñ Ð¿Ð¾Ð¿ÑобÑÑ ÑвелиÑиÑÑ Ð¸Ð½ÑеÑвал Ð¼ÐµÐ¶Ð´Ñ Ñловами в css.
Ðак измениÑÑ ÑаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ Ñловами CSS?
ÐÐ»Ñ ÑÑого Ð¼Ñ Ð¼Ð¾Ð¶ÐµÐ¼ иÑполÑзоваÑÑ Ð°Ð½Ð°Ð»Ð¾Ð³Ð¸Ñное ÑвойÑÑво, коÑоÑое назÑваеÑÑÑ word-spacing. РабоÑÐ°ÐµÑ Ð¾Ð½Ð¾ ÑоÑно Ñак же как и пÑедÑдÑÑее Ñ ÐµÐ´Ð¸Ð½ÑÑвеннÑм оÑлиÑием в Ñом, ÑÑо ÑаÑÑÑоÑние ÑÑÑанавливаеÑÑÑ Ð´Ð»Ñ ÑелÑÑ Ñлов.
word-spacing Ð¼Ð¾Ð¶ÐµÑ Ð¿ÑинимаÑÑ Ñакой же Ð½Ð°Ð±Ð¾Ñ Ð·Ð½Ð°Ñений:
- ЧиÑловое знаÑение â ÑÐ°Ð·Ð¼ÐµÑ Ð¸Ð½ÑеÑвала Ð¼Ð¾Ð¶ÐµÑ Ð±ÑÑÑ Ð·Ð°Ð´Ð°Ð½ в пикÑелÑÑ , дÑÐ¹Ð¼Ð°Ñ , пÑнкÑÐ°Ñ Ð¸ оÑноÑиÑелÑнÑÑ ÐµÐ´Ð¸Ð½Ð¸ÑаÑ
- normal â знаÑение по ÑмолÑаниÑ
- inherit â наÑледование ÑодиÑелÑÑÐºÐ¸Ñ Ð¿Ð°ÑамеÑÑов
ÐÐ»Ñ ÑÐµÑ Ð¶Ðµ ÑÑÐµÑ Ð±Ð»Ð¾ÐºÐ¾Ð² задам ÑаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ Ñловами в css-Ñайле:
.row15 .first p, .row15 .second p, .row15 .third p{ letter-spacing:0.2em; word-spacing:1em; } |
ÐÐ¾Ñ ÑÑо Ñ Ð¼ÐµÐ½Ñ Ð¿Ð¾Ð»ÑÑилоÑÑ:
ÐÑполÑзÑÑ Ð´Ð°Ð½Ð½Ñе ÑвойÑÑва можно пÑидаÑÑ ÑекÑÑÑ Ð´Ð¾Ð¿Ð¾Ð»Ð½Ð¸ÑелÑнÑй обÑем, но главное, конеÑно же, не пеÑеÑÑаÑаÑÑÑÑ. Так как ÑлиÑком болÑÑие ÑаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ Ñловами или Ñимволами обÑзаÑелÑно ÑкажеÑÑÑ Ð½Ð° внеÑнем виде и ÑиÑаемоÑÑи ÑекÑÑа. РлÑбом ÑлÑÑае нÑжно подбиÑаÑÑ Ð¸Ð½ÑеÑÐ²Ð°Ð»Ñ Ð² завиÑимоÑÑи Ð¾Ñ ÑиÑÑаÑии и иÑполÑзÑемого ÑÑиÑÑа.
Рна ÑÑом Ñ Ð¼ÐµÐ½Ñ ÑÐµÐ³Ð¾Ð´Ð½Ñ Ð²Ñе. ÐÑли даннÑй маÑеÑиал бÑл Ð´Ð»Ñ Ð²Ð°Ñ Ð¿Ð¾Ð»ÐµÐ·ÐµÐ½, делиÑеÑÑ ÑÑаÑÑей в ÑоÑиалÑнÑÑ ÑеÑÑÑ Ð¸ подпиÑÑвайÑеÑÑ Ð½Ð° Ð¼Ð¾Ñ ÑаÑÑÑÐ»ÐºÑ Ð½Ð¾Ð²Ð¾ÑÑей ÑайÑа!
УдаÑи вам в оÑоÑмлении ÑÑÑÐ°Ð½Ð¸Ñ ÑайÑа! Ðо вÑÑÑеÑи в ÑледÑÑÑÐ¸Ñ ÑÑаÑÑÑÑ !
С Ñважением Ð®Ð»Ð¸Ñ ÐÑÑаÑÑ
Источник
При верстке сайта обычно возникают всякого рода требования к тексту: где-то нужно выделить его заглавными буквами, где-то растянуть, а иногда возникает необходимость в увеличении или уменьшении расстояния между буквами.
После недолгих раздумий можно решить, что подобного рода необходимость у вас не возникнет. Однако, народная мудрость гласит: “Никогда не говори никогда”. Это изречение будет особенно уместно, если вы занимаетесь версткой профессионально.
Никто не даст гарантий, что ваш очередной заказчик не захочет уменьшить межбуквенный интервал. Ну или наоборот, увеличить расстояние между буквами. В данном CSS уроке мы учимся это делать, а поможет нам в этом свойство letter-spacing.
Видеоверсия:
Свойство letter-spacing
При помощи этого параметра мы можем управлять межсимвольным интервалом. В качестве значений подходят те же единицы измерения, которые мы используем при задании размера текста. В связи с этим советую изучить урок по размеру текста, если вы этого еще не сделали. Сперва, давайте попробуем увеличить межбуквенный интервал на 2 px.
body { letter-spacing: 2px; }
Все очень просто: мы указываем свойство letter-spacing и требуемое значение в тех или иных единицах измерения. Давайте к примеру, попробуем использовать единицу измерения em.
body { letter-spacing: .1em; }
Как и в предыдущем случае, расстояние между буквами увеличилось, но еще на большую величину. Результат обеих CSS правил можно увидеть на иллюстрации ниже.
Разница в использовании пикселей и единиц измерения em
Увеличение межбуквенного интервала является очень хорошим приемом для акцентирования внимания читателя на каком-то слове. Так, например на некоторых блогах слова в заголовке отображаются не только в полужирном начертании, но и с увеличенным межсимвольным интервалом.
Уменьшение расстояния между буквами
Мы также можем работать в сторону уменьшения. Для этого необходимо указывать отрицательные значения. Например, на один пиксель:
body { letter-spacing: -1px; }
Вот как это выглядит на практике:
Однако, хочу вас предупредить – отрицательные значения необходимо использовать осторожно, иначе буквы могут наложиться друг на друга.
Наследование
Свойство letter-spacing является наследуемым. Это означает, что изменив расстояние между буквами для одного элемента, вложенные в него теги унаследуют эти же значения. Например, представим что мы изменили межсимвольное расстояние для куска текста с классом morning (<div class=”morning”>).
Теперь, все вложенные в него абзацы будут наследовать значение родителя. Для того, чтобы сделать стандартное межбуквенное расстояние для одного из абзацев, нужно воспользоваться все тем же свойством letter-spacing, только придав ему значение normal.
Значение normal всегда будет возвращать текст к стандартному интервалу между символами.
Также и наоборот, если мы захотим от какого-нибудь элемента унаследовать значения родителя, впору воспользоваться свойством inherit.
В общем, как видите, в управлении межбуквенным интервалом нет ничего сложного. Главное – не забывайте про удобство читателя.
А на этом у меня все. Смею предположить что вам все понятно, если нет – задавайте свои вопросы в комментариях. Надеюсь, данный урок по CSS был для вас полезен. Если это так, сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу.
Источник
| Kosten | Дата: Четверг, 2019-09-12, 04:14 | Сообщение 1 |
| В этом материале узнаем как использовать свойство CSS, называемое межсловным интервалом, с примерами. Следующие свойства CSS можно использовать для настройки способа расположения букв, слов и строк текста относительно друг друга и страницы. Свойство определяет объесть пространства между строками текста на странице. Это очень полезно для управления так называемым «пробелом» страницы — промежутками между всеми элементами HTML. Широко признано, что больше пустого пространства облегчает чтение страницы. Свойство CSS word-spacing определяет ширину пробела между словами в блоке текста. Значения могут быть: normal: нормальный интервал, определенный шрифтом или браузером. length: укажите дополнительный интервал, указанный в единицах длины CSS – px, em, pt и т. д. Таким образом, указав интервал word-spacing: 2px будет означать: Интервал между словами = 2px + интервал между словами по умолчанию (определяется браузером) inherit: наследовать интервал между словами родительского элемента. Пример: HTML Код <div class=”space-words”>Слова будут разделяться 10px в этом предложении.</div> CSS Код .space-words { | |
| Страна: (RU) |
| Kosten | Дата: Четверг, 2019-09-12, 04:26 | Сообщение 2 |
| CSS позиционирование текста и интервалы line-height Свойство line-height определяет объем пространства между строками текста на веб – странице. Это очень полезно для управления так называемым «пробелом» страницы – промежутками между всеми элементами HTML. Широко признано, что больше пустого пространства облегчает чтение страницы. letter-spacing Это свойство CSS позволяет указывать пробелы между буквами. Это может быть указано в обычных единицах, таких как pixelsили ems. Межбуквенный интервал добавляется к стандартному межбуквенному интервалу, поэтому, например, если вы зададите ему значение 1px, межбуквенный интервал будет фактически равен 1px плюс межбуквенный интервал по умолчанию. Вы можете использовать положительное расстояние между буквами, чтобы переместить буквы дальше друг от друга, или отрицательное расстояние, чтобы переместить их ближе друг к другу: Код p { word-spacing text-align Позволяет нам выравнивать текст внутри элемента, где можете выбрать из left, right, center или justify. Обратите внимание, что это свойство выравнивает текст внутри содержащего его элемента, а не всей страницы. Элементы уровня блока, такие как абзацы p и разделы div по умолчанию заполняют всю ширину страницы, поэтому они действительно будут центрироваться на странице. Но ТАКЖЕ встроенные элементы, например span автоматически изменяют размер по ширине содержимого, поэтому все выравнивания будут выглядеть одинаково. Вы можете явно объявить ширину встроенного или блочного элемента, используя width свойство; если вы сделаете это, то текст будет выровнен в пределах этой ширины. Код p { text-indent Свойство CSS text-indent делает отступ первой строке текста в элементе. Вы можете указать сумму отступа, например в pixels или ems. Где значения text-indent могут быть отрицательными, чтобы тянуть текст к левой стороне страницы. | |
| Страна: (RU) |
Источник
Модуль CSS-текст описывает функции CSS, которые управляют переводом исходного текста в форматированный и переносом строк. Различные свойства CSS обеспечивают контроль над преобразованием регистра, обработкой пробелов, правилами переноса и переносом текста и строк, выравниванием, интервалами и отступами.
Основной единицей текста является символ. Тем не менее, поскольку системы письма не всегда так просты, как основной английский алфавит, то, чем на самом деле является символ, зависит от контекста, в котором используется этот термин. Например, в корейской системе письма каждое квадратное представление слога (например, 한 = хань) можно считать символом. Однако квадратный символ действительно состоит из нескольких букв, каждая из которых представляет фонему (например, ㅎ = h, ㅏ = a, ㄴ = n), и каждая из них также может считаться символом.
CSS построен на Unicode.
1. Преобразование текста: свойство text-transform
Свойство text-transform стилизует текст. Оно не влияет на базовое содержимое и не должно влиять на содержимое операции копирования и вставки простого текста.
Свойство наследуется.
| text-transform | |
|---|---|
| Значения: | |
| none | Значение по умолчанию, означает отсутствие эффектов. |
| capitalize | Изменяет написание первой буквы каждого слова в элементе, делая её прописной. |
| uppercase | Выводит все слова в элементе прописными буквами. |
| lowercase | Выводит все слова в элементе строчными буквами. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: inherit;
text-transform: initial;
2. Обработка пробелов и переносы строк: свойство white-space
Свойство white-space обрабатывает пробелы между словами и переносы строк внутри элемента.
Свойство наследуется.
| white-space | |
|---|---|
| Значения: | |
| normal | Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости. |
| nowrap | Запрещает переносы строк, за исключением применения <br>. |
| pre | Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк. |
| pre-wrap | Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо. |
| pre-line | Удаляет лишние пробелы, за исключением случаев <br>. |
| break-spaces | Поведение идентично pre-wrap, за исключением того, что: любая последовательность неудаляемых пробелов всегда занимает место, в том числе в конце строки; возможность переноса строки существует после каждого неудаляемого пробела, в том числе между пробелами. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
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;
3. Настройка табуляции: свойство tab-size
Свойство tab-size используется для изменения величины отступа, получаемого с помощью клавиши ТAB. Значения свойства игнорируются, когда установлено одно из трёх значений pre-line, normal или nowrap свойства white-space.
Работает только для элементов <textarea> и <pre>, для остальных блочных элементов значение всегда будет равно единице. Значения свойства, указанные в единицах длины, поддерживается только в Chrome 42+.
Свойство наследуется.
| tab-size | |
|---|---|
| Значения: | |
| целое число | Любое целое положительное число. По умолчанию табуляция делает отступ, равный восьми пробелам. |
| длина | Значение отступа, указываемое в единицах длины, например, рх. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
tab-size: 0;
tab-size: 10px;
tab-size: inherit;
tab-size: initial;
4. Разрыв строки и границы слов
Когда содержимое на строчном уровне разбивается на строки, оно разбивается на линейные блоки. Такое разбиение называется разрыв строки.
Когда строка прерывается из-за явных элементов управления разрывом строки, например, символа новой строки или тега <br>, начала или конца блока — это принудительный разрыв строки.
Если строка обрывается из-за переноса содержимого, когда браузер создает необязательные разрывы строк, чтобы вписать содержимое — это мягкий перенос.
4.1. Правила разрыва для букв: свойство word-break
Свойство word-break определяет возможности мягкого переноса между буквами, т.е. когда допустимо разбивать строки текста. В частности, оно контролирует, существует ли возможность мягкого переноса между смежными типографскими буквенными единицами и/или цифрами. Это не влияет на правила, регулирующие возможности мягкого переноса, созданные пробелами.
Свойство наследуется.
| word-break | |
|---|---|
| Значения: | |
| normal | Слова разрываются в соответствии с их обычными правилами. Значение по умолчанию. |
| break-all | Разрыв допускается в пределах слов. Перенос слов не применяется. |
| keep-all | Запрещает разрывы между парами символов. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: inherit;
word-break: initial;
4.2. Разрыв строки: line-break
Свойство line-break определяет правила переноса строк, применяемых внутри элемента, в частности то, как перенос взаимодействует со знаками препинания и символами.
Свойство наследуется.
| line-break | |
|---|---|
| Значения: | |
| auto | Браузер определяет набор используемых ограничений на разрыв строки, которые могут варьироваться в зависимости от длины линии, например, использовать менее строгий набор правил разрыва строки для коротких строк. Значение по умолчанию. |
| loose | Разбивает текст, используя наименее ограничивающий набор правил переноса строк. Обычно используется для коротких строк, например, в газетах. |
| normal | Разбивает текст, используя наиболее распространенный набор правил переноса строк. |
| strict | Разбивает текст, используя строгий набор правил переноса строк. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: inherit;
line-break: initial;
4.3. Расстановка переносов: свойство hyphens
Свойство hyphens определяет, разрешено ли использование переносов для создания возможностей мягкого переноса внутри строки текста.
Расстановка переносов — это контролируемое разбиение слов, при котором им обычно не разрешается разрываться, чтобы улучшить расположение абзацев. Как правило, разбиение слов происходит по слоговым или морфемным границам и при визуальном указании на разделение (обычно путем вставки дефиса, ‐). В некоторых случаях переносы могут также изменить написание слова. В любом случае, перенос слов является только эффектом рендеринга: он не должен влиять ни на содержимое документа, ни на выбор текста или поиск.
CSS Text Level 3 не определяет точные правила переноса слов, поэтому рекомендуется выбирать подходящие для языка точки переноса.
Свойство наследуется.
| hyphens | |
|---|---|
| Значения: | |
| none | Слова не переносятся, даже если символы внутри слова явно определяют возможности переноса. |
| manual | Слова переносятся только в тех местах, где внутри слова есть символы, которые явно указывают на возможность переноса слов (специальный символ ). Значение по умолчанию. |
| auto | Слова могут быть разбиты на возможности переноса, определяемые автоматически соответствующим языку ресурсом переноса в дополнение к тем, которые явно указаны условным дефисом. Необходимо задать язык своего контента (например, используя HTML-атрибут lang или заголовок HTTP Content-Language), чтобы получить правильный автоматический перенос слов. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
hyphens: none;
hyphens: manual;
hyphens: auto;
hyphens: inherit;
hyphens: initial;
4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap
Свойство overflow-wrap (или его устаревшее имя word-wrap) указывает, может ли неразрывная строка прерваться в неразрешенных точках, чтобы предотвратить переполнение линейного блока. Работает в том случае, когда свойство white-space разрешает перенос.
Свойство наследуется.
| overflow-wrap, word-wrap | |
|---|---|
| Значения: | |
| normal | Неразрывные строки могут разрываться только в разрешенных точках разрыва. Значение по умолчанию. |
| break-word | |
| anywhere | Неразрывная последовательность символов может быть разбита в произвольной точке, если в строке нет других приемлемых точек разрыва. Влияет только на визуальное отображение, не затрагивая исходный текст. В точке разрыва строки символ переноса не добавляется. Возможности мягкого переноса, представленные в любом месте, учитываются при расчете собственных размеров минимального содержимого. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
overflow-wrap: inherit;
overflow-wrap: initial;
5. Выравнивание и выключка строк
Выравнивание и выключка строк контролируют, как встроенный контент распределяется в линейном блоке.
5.1. Краткая запись для выравнивания текста: свойство text-align
Блок текста представляет собой набор линейных блоков. Свойство text-align задает свойства text-align-all и text-align-last и описывает, как блоки на уровне строки в каждом линейном блоке выравниваются относительно начальной и конечной сторон линейного блока. Значения, отличные от justify-all или match-parent, присваиваются text-align-all и сбрасываются в text-align-last на auto.
Свойство наследуется.
| text-align | |
|---|---|
| Значения: | |
| start | Содержимое на уровне строки выравнивается по начальному краю линейного блока. Значение по умолчанию. |
| end | Содержимое на уровне строки выравнивается по конечному краю линейного блока. |
| left | Содержимое на уровне строки выравнивается по левому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста. |
| right | Содержимое на уровне строки выравнивается по правому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста. |
| center | Содержимое на уровне строки центрируется внутри линейного блока. |
| justify | Текст выравнивается по ширине линейного блока, чтобы точно заполнить поле строки, прижимаюсь к левому и правому краям родительского элемента. Если иное не указано в text-align-last, последняя строка перед принудительным разрывом или конец блока выравнивается по началу. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами. |
| justify-all | Устанавливает text-align-all и text-align-last в justify, также выравнивая последнюю строку. |
| match-parent | Значение ведет себя так же, как inherit за исключением того, что унаследованное значение start или end интерпретируется относительно значения direction (или исходного содержащего блока, если нет родителя) и приводит к вычисленному значению left или right. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;
text-align: inherit;
5.2. Выравнивание текста по умолчанию: свойство text-align-all
Свойство text-align-all — сокращенный вариант свойства text-align определяет выравнивание всех строк содержимого в контейнере блока, за исключением последних строк, переопределенных значением text-align-last. Принимает значения start, end, left, right, center, justify и match-parent.
Свойство наследуется.
Синтаксис
text-align-all: start;
text-align-all: end;
text-align-all: left;
text-align-all: right;
text-align-all: center;
text-align-all: justify;
text-align-all: match-parent;
text-align-all: inherit;
5.3. Выравнивание последней строки: свойство text-align-last
Свойство text-align-last описывает, как выравнивается последняя строка блока или строки непосредственно перед принудительным разрывом строки.
Если задано значение auto, содержимое в соответствующей строке выравнивается по text-align-all, если только для text-align-all не настроено justify — в этом случае оно выравнивается по началу блока. Все остальные значения интерпретируются как описано для text-align.
Принимает значения auto, start, end, left, right, center, justify и match-parent.
Свойство наследуется.
Синтаксис
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;
text-align-last: match-parent;
6. Промежутки
CSS позволяет контролировать промежутки между словами и типографскими символами с помощью свойств word-spacing и letter-spacing.
6.1. Промежутки между словами: свойство word-spacing
Свойство word-spacing определяет дополнительный интервал между словами.
Ус