From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/text-indent/index.html | 212 ++++++++++++++++++++++++++++++++ 1 file changed, 212 insertions(+) create mode 100644 files/ru/web/css/text-indent/index.html (limited to 'files/ru/web/css/text-indent/index.html') diff --git a/files/ru/web/css/text-indent/index.html b/files/ru/web/css/text-indent/index.html new file mode 100644 index 0000000000..143069b642 --- /dev/null +++ b/files/ru/web/css/text-indent/index.html @@ -0,0 +1,212 @@ +--- +title: text-indent +slug: Web/CSS/text-indent +translation_of: Web/CSS/text-indent +--- +
{{CSSRef}}
+ +

Свойство text-indent определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова hanging и each-line могут изменить данное поведение.

+ +

Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.

+ +

 {{cssinfo}}

+ +

Синтаксис

+ +
/* значение <length> */
+text-indent: 3mm;
+text-indent: 40px;
+
+/* значение <percentage> зависит от ширины блока*/
+text-indent: 15%;
+
+/* значения ключевых слов */
+text-indent: 5em each-line;
+text-indent: 5em hanging;
+text-indent: 5em hanging each-line;
+
+/* международные значения */
+text-indent: inherit;
+text-indent: initial;
+text-indent: unset;
+
+ +

Значения

+ +
+
<length> 
+
Отступ определяется как абсолютная длина ({{cssxref("<length>")}}). Возможны также отрицательные значения. Статья про значение длины ({{cssxref("<length>")}}) расскажет больше про возможные единицы измерения.
+
<percentage> 
+
В процентном ({{cssxref("<percentage>")}}) соотношении отступ зависит от ширины всего блока, внутри которого находится строка.
+
each-line {{experimental_inline}} (экспериментальное значение)
+
Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса. 
+
hanging {{experimental_inline}} (экспериментальное значение)
+
Отступ добавляется ко всем строкам, кроме первой. 
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Простые примеры отступов

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+ +

CSS

+ +
p {
+  text-indent: 5em;
+  background: powderblue;
+}
+ +

{{ EmbedLiveSample('Simple_indent','100%','100%') }}

+ +

Пример со значением <percentage> 

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+ +

CSS

+ +
p {
+  text-indent: 30%;
+  background: plum;
+}
+ +

{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Text', '#text-indent', 'text-indent')}}{{Spec2('CSS3 Text')}}Добавили ключевые слова hanging и each-line
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}{{Spec2('CSS3 Transitions')}}Определяет text-indent как анимированное свойство
{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}{{Spec2('CSS2.1')}}Подробно определяет поведение блочно-строчных элементов (display: inline-block) и незаполненных блоков (anonymous block boxes)
{{SpecName('CSS1', '#text-indent', 'text-indent')}}{{Spec2('CSS1')}}Начальное определение
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ХарактеристикаFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Базовая поддержка{{CompatGeckoDesktop("1.0")}}1.0{{CompatVersionUnknown}}3.03.51.0 (85)
hanging{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
each-line{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ХарактеристикаFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hanging{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
each-line{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Gecko это не поддерживает. Смотрите {{bug(784648)}}.

-- cgit v1.2.3-54-g00ecf