CSS свойство direction

Свойство direction определяет направление текста.

Свойство direction устанавливает базовое направление текста для блочных элементов и направление встраиваний, создаваемых свойством unicode-bidi. Оно также задаёт выравнивание текста по умолчанию для блочных элементов и направление потока ячеек внутри строки таблицы.

Направление текста обычно задаётся внутри документа, например, с помощью атрибута dir в HTML, а не путём прямого использования свойства direction. В отличие от атрибута HTML dir, свойство CSS direction не наследуется ячейками таблицы из столбцов, поскольку ячейки находятся внутри строк, а не столбцов. Вместо этого ячейки наследуют направление от самого элемента таблицы.

INFO

Свойство direction не влияет на элементы строчного уровня.

Начальное значение	ltr
Применяется ко	Всем элементам.
Наследуется	Да.
Анимация	Дискретная.
Версия	CSS2
Синтаксис DOM	object.style.direction = "rtl";

Синтаксис

Синтаксис свойства CSS direction

css

direction: ltr | rtl | initial | inherit;

Пример свойства direction:

Пример использования свойства CSS direction со значением rtl (справа налево)

html

<!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>

Try it Yourself »

Результат

CSS direction Property

В приведённом примере используется значение «rtl». Текст располагается справа налево.

Значения

Значение	Описание	Запустить
ltr	Указывает, что направление текста будет слева направо. Это значение по умолчанию.	Запустить »
rtl	Указывает, что направление текста будет справа налево.	Запустить »
initial	Устанавливает для свойства значение по умолчанию.	Запустить »
inherit	Наследует свойство от родительского элемента.

Практика

Что делает CSS-свойство 'direction'?

Устанавливает направление текста для содержимого элемента.Управляет направлением flex-контейнераНе применяется к строчным элементам.Влияет на порядок столбцов таблицы.

CSS свойство direction ​

Синтаксис ​

Пример свойства direction: ​

Результат ​