Свойство CSS text-transform
Свойство text-transform используется для приведения текста к верхнему или нижнему регистру, а также для написания каждого слова с заглавной буквы.
Это свойство учитывает некоторые правила преобразования регистра, специфичные для разных языков. Рассмотрим некоторые из них:
- В тюркских языках, таких как турецкий (tr), азербайджанский (az), крымскотатарский (crh), поволжский татарский (tt) и башкирский (ba), существуют две буквы «i» — с точкой и без, а также следующие пары для преобразования регистра: i/İ и ı/I.
- В немецком языке (de) символ ß в верхнем регистре заменяется на SS.
- В греческом языке (el) при написании всего слова в верхнем регистре (ά/Α) ударение на гласной теряется, за исключением разделительной эпы (ή/Ή).
Поддержка браузерами преобразования регистра с учётом языковых особенностей может различаться.
WARNING
Значения full-width и full-size-kana являются экспериментальными. full-width частично поддерживается в WebKit, а full-size-kana имеет очень ограниченную поддержку.
| Начальное значение | none |
|---|---|
| Применяется ко | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимация | Нет. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.textTransform = "capitalize"; |
Синтаксис
Синтаксис свойства CSS text-transform
text-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana | initial | inherit;Пример использования свойства text-transform со значением "uppercase":
Пример свойства CSS text-transform со значением uppercase
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<p>This is some paragraph.</p>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Результат
Значение "capitalize"
Значение capitalize свойства text-transform делает заглавной первую букву каждого слова, а также первую букву, стоящую после дефиса. Первая буква, следующая за цифрой, не будет заглавной. Например, дата «January 3th, 2019» не превратится в «January 3Th, 2019». Это значение изменяет только первую букву слова, остальные буквы остаются без изменений.
В приведенном ниже примере для первого предложения использовано значение capitalize, а для второго — lowercase:
Пример использования свойства text-transform со значениями "capitalize" и "lowercase":
Пример свойства CSS text-transform со значениями capitalize и lowercase
<!DOCTYPE html>
<html>
<head>
<style>
.a {
text-transform: capitalize
}
.b {
text-transform: lowercase
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<div class="a">"Text transform property"</div>
<br />
<div class="b">
"THIS IS SOME PARAGRAPH FOR EXAMPLE".
</div>
</body>
</html>Пример использования свойства text-transform со значением "none":
Пример свойства text-transform со значением "none":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
h2 {
text-transform: none;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>
Example of the text-transform property with the "none” value:
</h2>
</body>
</html>Пример использования свойства text-transform со значением "initial":
Пример свойства text-transform со значением "initial":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
p.text {
text-transform: initial;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>text-transform: initial:</h2>
<p class="text">
Example of the text-transform property with the "initial” value:
</p>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| none | Без изменений регистра. Это значение по умолчанию. | Запустить » |
| capitalize | Делает первую букву каждого слова заглавной. | Запустить » |
| uppercase | Делает все буквы каждого слова заглавными. | Запустить » |
| lowercase | Делает все буквы каждого слова строчными. | Запустить » |
| full-width | Размещает символ (идеограммы и латиницу) в квадратной ячейке, что позволяет выравнивать текст в китайском или японском. | Запустить » |
| full-size-kana | Преобразует все маленькие символы кана в полноразмерные, чтобы компенсировать проблемы с читаемостью при малых размерах шрифта, обычно используемых в руби-тексте. | Запустить » |
| initial | Возвращает свойству значение по умолчанию. | Запустить » |
| inherit | Наследует значение свойства от родительского элемента. |
Практика
Как сделать так, чтобы каждое слово в тексте начиналось с заглавной буквы?