Свойство text-indent

Отступ первой строки (свойство text-indent) | CSS

text-indent наследуется, применяется к блочным элементам, изменяет текст и строчные элементы

Положительное значение свойства text-indent определяет длину отступа первой строки элемента. Отрицательное значение — длину выступа.

Значение text-indent в процентах устанавливает отступ или выступ первой строки элемента в процентах от ширины элемента.

Красная строка в HTML: как сделать отступ первой строки абзаца

Разбивать текст на абзацы следует с помощью тега

.

У тега

могут быть следующие дочерние элементы [w3.org]: a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr.

И все эти дочерние элементы дружно отодвигаются, находясь на первой строке.

Неудобно, что свойство наследуется и у inline-block элементов тоже присутствует отступ слева до содержимого. На inline элементы оно не распространяется, так как должно быть задано только блочным элементам.

Разбивать текст на абзацы следует с помощью тега <p>.

У тега <p> могут быть следующие дочерние элементы [w3.

org]: a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr.

И все эти дочерние элементы дружно отодвигаются, находясь на первой строке.

Неудобно, что свойство наследуется и у inline-block элементов тоже присутствует отступ слева до содержимого. На inline элементы оно не распространяется, так как должно быть задано только блочным элементам.

Запретить наследование text-indent

Теперь свойство не наследуется и у inline-block элементов отсутствует отступ слева до содержимого.

Теперь свойство не наследуется и у inline-block элементов отсутствует отступ слева до содержимого.

Отодвигать только текст красной строки абзаца

Предложение после картинки не смещёно, так как оно находится уже на второй строке.

Предложение после картинки не смещёно, так как оно находится уже на второй строке.

Вместо text-indent можно использовать margin для псевдоэлемента ::first-letter.

Предложение после картинки не смещёно, так как первой букве первой строки блока предшествует другой элемент строки.

Вместо text-indent можно использовать margin для псевдоэлемента ::first-letter.

Предложение после картинки не смещёно, так как первой букве первой строки блока предшествует другой элемент строки.

Источник: http://shpargalkablog.ru/2016/02/text-indent.html

text-indent

The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.

Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box.

Syntax

/* values */
text-indent: 3mm;
text-indent: 40px; /* value relative to the containing block width */
text-indent: 15%; /* Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line; /* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

Values

Indentation is specified as an absolute . Negative values are allowed. See values for possible units.Indentation is a of the containing block's width.

each-line Indentation affects the first line of the block container as well as each line after a forced line break, but does not affect lines after a soft wrap break.hanging Inverts which lines are indented.

All lines except the first line will be indented.

Formal syntax

&& hanging? && each-line?

where
= |<\p>

Simple indent example

HTML

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

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

CSS

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

Percentage indent example

HTML

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

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

CSS

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

Specifications

Initial value

Applies to

Inherited

Percentages

Media

Computed value

Animation type

Canonical order

block containers
yes
refer to the width of the containing block
visual
the percentage as specified or the absolute length, plus any keywords as specified
a length, percentage or calc();
The length or percentage before the keywords, if both are present. If several keywords are present, they appear in the same order as their appearance in the formal grammar.

Browser compatibility

Update compatibility data on GitHub

DesktopMobileChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetBasic support

each-lineExperimental

hangingExperimental

Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 3 Opera Full support 3.5 Safari Full support 1 WebView Android Full support Yes Chrome Android Full support Yes Edge Mobile Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes
Chrome No support No Edge No support No Firefox No support No IE No support No Opera No support No Safari No support No WebView Android No support No Chrome Android No support No Edge Mobile No support No Firefox Android No support No Opera Android No support No Safari iOS No support No Samsung Internet Android No support No
Chrome No support No Edge No support No Firefox No support No IE No support No Opera No support No Safari No support No WebView Android No support No Chrome Android No support No Edge Mobile No support No Firefox Android No support No Opera Android No support No Safari iOS No support No Samsung Internet Android No support No
Читайте также:  Как увеличить количество кликов по рекламе

Full support  Full supportNo support  No supportExperimental. Expect behavior to change in the future.Experimental. Expect behavior to change in the future.

Источник: https://developer.mozilla.org/docs/Web/CSS/text-indent

Отображение XML-документов с использованием таблиц каскадных стилей

Вы можете воспользоваться свойством letter-spacing для увеличения или уменьшения просвета между символами в тексте элемента. Для увеличения просвета свойству letter-spacing следует присвоить положительное значение в соответствующих единицах размера. Например, следующее правило увеличивает просвет между символами на одну четверть от высоты текста:

TITLE {letter-spacing:.25em}

Вы можете задать свойству letter-spacing отрицательное значение для уменьшения просвета между символами на значение в соответствующих единицах размера. Например, это правило уменьшает просвет между символами на половину пункта:

TITLE {letter-spacing:-.5pt}

(Более подробная информация о различных видах значений размеров, которые вы можете устанавливать, содержится на вставке «Задание значений в размерных единицах» ранее в этой лекции.)

Вы также можете выбрать обычную величину просвета, установив для свойства letter-spacing значение normal. Например, следующая таблица стилей, присоединенная к XML-документу из Листинга 7.

Обратите внимание

4, назначает увеличенный просвет между символами для элемента TITLE, и назначает обычный просвет между символами для элемента SUBTITLE (второе назначение необходимо, чтобы отменить увеличенный просвет между символами, который в противном случае элемент SUBTITLE унаследовал бы от родительского элемента TITLE ):

POEM {font-size:145%}
POEM, TITLE, SUBTITLE, AUTHOR, SECTION, NUMBER, STANZA, VERSE {display:block}
SECTION, STANZA {margin-top:1em}
TITLE {letter-spacing:.5em}
SUBTITLE {letter-spacing:normal}

В соответствии с правилами этой таблицы стилей, Internet Explorer 5 отобразит XML-документ как показано на рисунке 7.20.

Рис. 7.20.

Вы можете использовать свойство vertical-align для создания верхних или нижних индексов (надстрочных и подстрочных символов). Это свойство оказывает воздействие только на элементы inline (см. раздел «Установка свойства display» ранее в этой лекции).

Вы можете назначить свойству vertical-align одно из ключевых слов CSS, описанных в таблице 7.10. Чтобы получить образцы текста, я присваивал значение свойству vertical-align только для элемента CHILD, который является элементом inline и описан в документе следующим образом:

PARENT ELEMENT CHILD ELEMENT

Дочерние элементы не наследуют свойство vertical-align.

Таблица 7.10.

Ключевое слово в vertical-align:Пример правила CSS:Эффект: baseline (по умолчанию)CHILD
{font-size:75%;
vertical-align:baseline}Совмещает базовую линию текста элемента с базовой линией текста родительского элемента
Ключевое слово в vertical-align:Пример правила CSS:Эффект: subCHILD
{font-size:75%;
vertical-align:sub}Отображает текст элемента как нижний индекс
Ключевое слово в vertical-align:Пример правила CSS:Эффект: superCHILD
{font-size:75%;
vertical-align:super}Отображает текст элемента как верхний индекс

Вы можете воспользоваться свойством text-align для управления горизонтальным выравниванием текста элемента. Это свойство будет работать только в том случае, если вы используете его для элемента типа block.

Оно воздействует как на сам элемент, так и на дочерние элементы, которые он содержит, независимо от того, относятся ли они к типу block или inline.

(Об элементах block и inline рассказывалось в разделе «Установка свойства display».)

Свойство text-align воздействует на выравнивание текста внутри области содержимого текста. По умолчанию область содержимого текста занимает практически полную ширину окна браузера. Однако, вы можете модифицировать как ширину, так и положение области текста элемента (см. раздел «Установка свойств текстовых областей» далее в этой лекции).

Вы можете назначить свойству text-align одно из следующих трех ключевых слов:

  • left. Выравнивает каждую строку по левому краю. Предположим, вы применяете следующее правило к XML-документу из Листинга 7.4 (в добавление к остальным правилам, содержащимся в таблице стилей из Листинга 7.3, за исключением установки свойства background-image, которая удалена):Поэма будет выглядеть, как показано на рисунке 7.21.Рис. 7.21.
  • right. Выравнивает каждую строку по правому краю. Так, следующее правило выравнивает текст поэмы вправо, как показано на рисунке 7.22.Рис. 7.22.
  • center. Центрирует строки по горизонтали. Например, следующее правило центрирует весь текст поэмы, как показано на рисунке 7.23.Рис. 7.23.

Вы можете воспользоваться свойством text-indent, чтобы задать отступ для первой строки текста элемента. Вы можете устанавливать для свойства text-indent все виды значений размеров, описанных на вставке «Задание значений в размерных единицах» ранее в этой лекции. Например, следующее правило задает отступ для первой строки элемента VERSE, равный трехкратной высоте ее шрифта:

Вот как будет выглядеть элемент VERSE:

It is in his walk, the carriage of his
neck, the flex of his waist and knees-dress
does not hide him;

Альтернативой является задание величины отступа в процентах от полной ширины текста элемента. Например, это правило задает смещение первой строки элемента VERSE на половину ширины элемента:

Читайте также:  Как узнать видимость сайта

Вот как элемент VERSE будет выглядеть:

It is in his walk, the
carriage of his neck, the flex of his waist
and knees-dress does not hide him;

Совет. Чтобы задать отступ для всех строк элемента (а не только для первой строки), воспользуйтесь свойством margin-left (см. раздел «Установка свойств управления полями» далее в этой лекции).

Вы можете задать отрицательное значение – в размерных единицах или в процентах – чтобы сдвинуть первую строку влево относительно других строк. Однако если вы просто присвоите отрицательное значение свойству text-indent, первая часть строки окажется скрытой, как показано на рисунке 7.24.

Рис. 7.24.

Чтобы избежать этого, вы должны установить для элемента левое поле. Например, следующее правило устанавливает левое поле шириной в 4em ( margin-left:4em ), а затем сдвигает первую строку на 2em ( text-indent:-2em ), создавая висячий отступ, как показано на рисунке 7.25.

VERSE {margin-left:4em; text-indent:-2em}
Рис. 7.25.

Источник: http://www.intuit.ru/studies/courses/63/63/lecture/1857?page=7

Текст

назад   далее   содержание   свойства   указатель  

Свойства, описываемые в следующих разделах, влияют на визуальное представление символов, пробелов, слов и абзацев.

16.1 : свойство 'text-indent'

Это свойство определяет отступ первой строки теста в блоке. Более точно говоря, оно определяет отступ первого блока, который входит в первую строку блока линейного блока. Блок смещается относительно левого (или правого при расположении текста справа налево) края линейного блока. Агенты пользователей должны представлять этот отступ как пустое пространство.

Значения имеют следующий смысл:

Отступ является фиксированной величиной.Отступ задается в процентах относительно ширины содержащего блока.

Значение свойства 'text-indent' может быть отрицательным, но в конкретных реализациях могут быть установлены ограничения на использование значений.

Example(s):

В следующем примере задается отступ текста, равный '3em'.

P { text-indent: 3em }

16.2 свойство 'text-align'

Это свойство определяет способ выравнивания последовательного содержимого блока. Значения имеют следующий смысл:

left, right, center и justifyВыравнивание текста по левому или правому краю, по центру и по обоим краям соответственно.Определяет строку, по которой будет производиться выравнивание ячеек в абзацах таблицы (подробную информацию и примеры можно найти в разделе горизонтальное выравнивание абзаца). Это значение применяется только к ячейкам таблицы. Применительно к другим элементам значение будет трактоваться как 'left' или 'right', в зависимости от значения свойства 'direction': 'ltr' или 'rtl' соответственно.

Блок текста — это совокупность линейных блоков.

При значениях 'left', 'right' и 'center' это свойство указывает способ выравнивания последовательных блоков в каждом линейном блоке относительно левой и правой стороны линейного блока; выравнивание производится не относительно области вывода. При значении 'justify' помимо настройки положения линейных блоков, агент пользователя может также увеличить последовательные блоки. (См. также 'letter-spacing' и 'word-spacing'.)

Пример(ы):

В этом примере обратите внимание на то, что значение 'text-align' наследуется, поэтому во всех элементах уровня блока, находящихся в элементе DIV и имеющих значение 'class=center', последовательное содержимое будет выровнено по центру.

DIV.center { text-align: center }

Важно

Примечание. Алгоритм, фактически используемый для выравнивания, зависит от агента пользователя и используемого языка.

Конформные агенты пользователей могут интерпретировать значение 'justify' как 'left' или 'right', это зависит от основного направления написания элемента: слева направо или справа налево соответственно.

16.3.1 : свойство 'text-decoration'

Этим свойством описываются элементы декорирования текста элементов. Если свойство задано для элемента уровня блока, оно влияет на все последующие элементы последовательного уровня.

Если свойство задано для элемента последовательного уровня (или влияет на него), оно влияет и на все блоки, генерируемые этим элементом.

Если у элемента нет содержимого или текста (например, элемент IMG в HTML), агенты пользователей должны игнорировать это свойство.

Значения имеют следующий смысл:

noneТекст не декорируется.underlineВсе строки текста подчеркиваются.overlineНад каждой строкой текста располагается черта.line-throughВсе строки текста перечеркнутыblinkТекст мерцает (становится то видимым, то невидимым). Конформные агенты пользователей не обязательно должны поддерживать данное значение.

Нужный цвет(а) для элемента декорирования текста определяется значением свойства 'color'.

Это свойство не наследуется, но последующие блоки схемы должны форматироваться с использованием тех же самых элементов декорирования (например, все они должны быть подчеркнуты). Цвет элементов декорирования всегда должен оставаться прежним, даже если последующие элементы имеют другие значения 'color'.

Пример(ы):

В следующем примере для HTML текстовое содержимое всех элементов A, действующих как гиперссылки, будет подчеркнуто:

A[href] { text-decoration: underline }

16.3.2 : свойство 'text-shadow'

Значением этого свойства может быть разделенный запятыми список эффектов затенения, которые будут применены к тексту элемента.

Эффекты затенения применяются в указанном порядке и поэтому могут накладываться друг на друга, но никогда не перекрывают сам текст.

Эти эффекты не меняют размер блока, но могут выходить за границы блока. Они находятся на одном уровне положения с самим элементом.

Совет

Для каждого эффекта затенения должно быть указано смещение затенения, а также может указываться радиус размытия и цвет затенения.

Смещение затенения указывается с помощью двух значений , которые определяют расстояние до текста. Первое значение указывает горизонтальное расстояние до правой части текста.

При отрицательном значении длины затенение помещается слева от текста. Второе значение определяет вертикальное расстояние снизу от текста.

При отрицательном значении вертикального расстояния затенение располагается над текстом.

После смещения затенения можно указать радиус размытия. Это значение, обозначающее границы размытия. Точного алгоритма для вычисления эффекта размытия нет.

Читайте также:  Раскрутка группы вконтакте

До или после значений смещения эффекта затенения можно задать его цвет. Это значение цвета будет использоваться в качестве базового. Если цвет не указан, будет использоваться значение свойства 'color'.

Затенение может использоваться с псевдоэлементами :first-letter и :first-line.

Пример(ы):

В представленном ниже примере тень будет располагаться справа и ниже текста элемента. Так как цвет не указан, затенение будет иметь тот же цвет, что и элемент, а поскольку не указан радиус размытия, затенение не будет размыто:

H1 { text-shadow: 0.2em 0.2em }

В следующем примере тень располагается справа и ниже текста элемента. Тень будет красного цвета с радиусом размытия 5px.

H2 { text-shadow: 3px 3px 5px red }

В следующем примере представлен список эффектов затенения. Первая тень располагается справа и ниже текста элемента, она будет красного цвета без размытия.

Вторая тень перекроет первую; она будет желтого цвета, размытая и будет находиться слева и ниже текста. Третья тень будет находиться справа и над текстом.

Так как цвет этой тени не указан, будет использоваться значение свойства элемента 'color':

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Пример(ы):

Рассмотрите следующий пример:

SPAN.glow { background: white; color: white; text-shadow: black 0px 0px 5px;
}

Обратите внимание

В данном случае у свойств 'background' и 'color' одно значение, а свойство 'text-shadow' используется для создания эффекта «солнечного затмения»:

   [D]

Примечание. Это свойство не определено в спецификации CSS1. Некоторые эффекты затенения (например, эффект, описанный в последнем примере) могут привести к тому, что текст будет невидим при работе с агентами пользователей, поддерживающих только CSS1.

16.4 : свойства 'letter-spacing' и 'word-spacing'

Это свойство определяет расположение символов в тексте. Значения имеют следующий смысл:

normalСтандартное расстояние для текущего шрифта. Это значение позволяет агентам пользователей менять расстояние между символами для выравнивания текста.Это значение позволяет задать дополнительно межсимвольное расстояние, которое добавляется к стандартному. Значения могут быть отрицательными, их применение зависит от реализации. Для выравнивания по обоим краям агенты пользователей могут не увеличивать или не уменьшать расстояние между символами.

Алгоритмы определения расстояния между символами зависят от агента пользователя. На расстояние между символами также может повлиять выравнивание по обоим краям (см. свойство 'text-align').

Пример(ы):

В данном примере расстояние между символами в элементах BLOCKQUOTE увеличено на '0.1em'.

BLOCKQUOTE { letter-spacing: 0.1em }

В следующем примере агенту пользователя запрещено изменять расстояние между символами:

BLOCKQUOTE { letter-spacing: 0cm } /* Same as '0' */

Если итоговое расстояние между двумя символами отлично от стандартного, агенты пользователей не должны использовать

Конформные агенты пользователей могут трактовать значение свойства 'letter-spacing' как 'normal'.

Это свойство определяет расстояние между словами. Значения имеют следующий смысл:

normalСтандартное расстояние между словами, определяемое текущим шрифтом и/или агентом пользователя.Дополнительное расстояние между словами, оно добавляется к стандартному. Значения могут быть отрицательными, их применение зависит от агентов пользователей.

Алгоритм определения расстояния между словами зависит от параметров, указанных агентом пользователя. На расстояние между словами также влияет выравнивание по обоим краям (см. свойство 'text-align').

Пример(ы):

Важно

В данном примере расстояние между всеми словами в элементе H1 увеличивается на '1em'.

H1 { word-spacing: 1em }

Конформные агенты пользователей могут трактовать значение свойства 'word-spacing' как 'normal'.

16.5 : свойство 'text-transform'

Это свойство управляет заглавными буквами в тексте элемента. Значения имеют следующий смысл:

capitalizeКаждое слово начинается с заглавной буквы.uppercaseВсе буквы каждого слова будут заглавными.lowercaseВсе буквы каждого слова будут строчными.noneНе влияет на буквы.

Фактическое преобразование в заглавные или строчные буквы зависит от используемого языка написания. О том, как определить язык элемента, см. в RFC 2070 ([RFC2070]).

Конформные агенты пользователей могут подразумевать для свойства 'text-transform' значение 'none' для символов, не относящихся к набору Latin-1, и для элементов на языках, процесс преобразования которых отличается от процесса, указанного в таблицах преобразования кодировок ISO 10646 ([ISO10646]).

Пример(ы):

В данном примере весь текст в элементе H1 будет выделен заглавными буквами.

H1 { text-transform: uppercase }

16.6 : свойство 'white-space'

Данное свойство определяет способ обработки пустого пространства внутри элемента. Значения имеют следующий смысл:

normalЕсли установлено это значение, агенты пользователей должны сжимать последовательное пустое пространство и разбивать строки для вмещения линейных блоков. Дополнительные разрывы строк можно определить с помощью комбинации «A» в генерируемом содержимом (например, для элемента BR в HTML).preЕсли установлено это значение, агенты пользователей не могут изменять последовательность символов пустого пространства. Строки разбиваются только в местах начала новой строки, обозначенных в исходном тексте, или в генерируемом содержимом при наличии «A»).nowrapЭто значение работает как значение 'normal' в смысле сокращения пустого пространства, но запрещает образовывать разрывы строк в текста, за исключением разрывов, определенных с помощью комбинации «A» в генерируемом содержимом (например, для элемента BR в HTML).

Example(s):

В следующих примерах показано возможное поведение путсого пространства из элементов PRE и P и поведение атрибута «nowrap» в HTML.

PRE { white-space: pre }
P { white-space: normal }
TD[nowrap] { white-space: nowrap }

Конформные агенты пользователей могут игнорировать в авторских и пользовательских таблицах стилей свойство 'white-space', но должны определить значение этого свойства в основной таблице стилей.

назад   далее   содержание   свойства   указатель  

Источник: http://www.codenet.ru/webmast/css2/text.php

Ссылка на основную публикацию