CSS свойство direction
The direction CSS property defines in which direction the text should be. See some example and try it for yourself.
Свойство direction определяет направление текста.
Свойство direction устанавливает базовое направление текста для блочных элементов и направление встраиваний, создаваемых свойством unicode-bidi. Оно также задаёт выравнивание текста по умолчанию для блочных элементов и направление потока ячеек внутри строки таблицы.
Направление текста обычно задаётся внутри документа, например, с помощью атрибута dir в HTML, а не путём прямого использования свойства direction. В отличие от атрибута HTML dir, свойство CSS direction не наследуется ячейками таблицы из столбцов, поскольку ячейки находятся внутри строк, а не столбцов. Вместо этого ячейки наследуют направление от самого элемента таблицы.
info
Свойство
directionне влияет на элементы строчного уровня.
| Начальное значение | ltr |
|---|---|
| Применяется ко | Всем элементам. |
| Наследуется | Да. |
| Анимация | Дискретная. |
| Версия | CSS2 |
| Синтаксис DOM | object.style.direction = "rtl"; |
Синтаксис
Синтаксис свойства CSS direction
direction: ltr | rtl | initial | inherit;Пример свойства direction:
Пример использования свойства CSS direction со значением rtl (справа налево)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
direction: rtl;
}
</style>
</head>
<body>
<p>As you can see, this text is written with default direction.</p>
<div>However, this text is written from right to left as we defined.</div>
</body>
</html>Результат
В приведённом примере используется значение «rtl». Текст располагается справа налево.
Значения
| Значение | Описание | Запустить |
|---|---|---|
| ltr | Указывает, что направление текста будет слева направо. Это значение по умолчанию. | Запустить » |
| rtl | Указывает, что направление текста будет справа налево. | Запустить » |
| initial | Устанавливает для свойства значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что делает CSS-свойство 'direction'?