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

CSS свойства

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
text-transform1.01.07.01.04.012.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.
CSS свойства