У 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 |
|---|---|---|---|---|---|---|
| жоден | жоден | жоден | жоден | жоден | жоден | жоден |