Увлачење текста - ЦСС-трикови

У text-indentособина одређује колико хоризонтални текст простор треба да се уселили пре почетка прве линије садржаја текста елемента. Размак се израчунава од почетне ивице елемента контејнера на нивоу блока.

Почетна ивица је обично лева, али може бити и десна ако је у режиму здесна налево, али својство правца.

text-indentИмовина је наслеђена када се специфицира на блок елемент, што значи да ће утицати инлине-блок потомак елементе. Када имате посла са децом са уграђеним блоковима, можда ћете их желети присилити text-indent: 0;.

Синтакса

text-indent: | | inherit && ( hanging || each-line ) p ( text-indent: 1.5em; )

Случај уобичајене употребе био би једноставно стилски. Увлачење првог реда пасуса је некако старомодно и може изазвати такав осећај. Могао би се користити уместо размака након пасуса као алтернативни визуелни индикатор, иако је размак вероватно читљивији.

Још један уобичајени случај примене је „замена слике“ где се текст избацује из елемента помоћу увлачења текста и скрива преливање.

вешање

hangingје експериментални и незванични вредности за text-indentимовину. Преокреће које линије су увучене. У основи, увлачи сваки ред, осим првог, што резултира неком врстом интерпункције.

Ова вредност је заставица, која прати заједничку вредност попут дужине.

свака линија

each-lineје експериментални и незванични вредности за text-indentимовину. Идеја је да се сваки ред увуче након принудног прекида (са а
).

Ова вредност је заставица, која прати заједничку вредност попут дужине.

Демо

Погледајте увлаку текста оловке Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.

Подршка прегледача

Основна подршка

Хром	Сафари	Фирефок	Опера	ИЕ	Андроид	иОС
било који	било који	било који	3.5+	3+	било који	било који

виси вредност

Хром	Сафари	Фирефок	Опера	ИЕ	Андроид	иОС
ниједан	ниједан	ниједан	ниједан	ниједан	ниједан	ниједан

вредност сваке линије

Хром	Сафари	Фирефок	Опера	ИЕ	Андроид	иОС
ниједан	ниједан	ниједан	ниједан	ниједан	ниједан	ниједан