CSS свойство text-transform

Определение и применение

CSS свойство text-transform управляет регистром текста.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
text-transform	1.0	1.0	7.0	1.0	4.0	12.0

CSS синтаксис:

text-transform:"none | capitalize | uppercase | lowercase | initial | inherit";

JavaScript синтаксис:

object.style.textTransform = "capitalize"

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

Значение	Описание
none	Текст отображается как есть (регистр букв не изменяется). Это значение по умолчанию.
capitalize	Преобразует первые символы каждого слова в верхний регистр.
uppercase	Преобразует все символы в верхний регистр.
lowercase	Преобразует все символы в нижний регистр.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Свойство text-transform.</title>
<style> 
.test {
text-transform : capitalize; /* преобразуем первые символы каждого слова в верхний регистр */
width : 500px; /* задаём ширину текстового блока. */
}
.test2 {
text-transform : uppercase; /* преобразуем все символы в верхний регистр */
width : 500px; /* задаём ширину текстового блока. */
}
.test3 {
text-transform : lowercase; /* преобразуем все символы в нижний регистр */
width : 500px; /* задаём ширину текстового блока. */
}
</style>
</head>
	<body>
		<p class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		<p class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		<p class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
	</body>
</html>

Пример изменения регистра текста, используя CSS.

CSS свойства