Отстъп на текст - CSS-трикове

Anonim

На 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имота. Идеята е да се отстъпи всеки ред след принудително прекъсване на линия (с a
).

Тази стойност е флаг, заедно с обща стойност като дължина.

Демонстрация

Вижте текстовия отстъп на Pen от Chris Coyier (@chriscoyier) на CodePen.

Поддръжка на браузър

Основна поддръжка

Chrome Сафари Firefox Опера IE Android iOS
всякакви всякакви всякакви 3,5+ 3+ всякакви всякакви

висяща стойност

Chrome Сафари Firefox Опера IE Android iOS
нито един нито един нито един нито един нито един нито един нито един

стойност на всеки ред

Chrome Сафари Firefox Опера IE Android iOS
нито един нито един нито един нито един нито един нито един нито един