Text indent что это
Отступ первой строки (свойство text-indent) | CSS
text-indent
Что такое text-indent CSS
Положительное значение свойства 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 элементы оно не распространяется, так как должно быть задано только блочным элементам.
Запретить наследование text-indent
Теперь свойство не наследуется и у inline-block элементов отсутствует отступ слева до содержимого.
Отодвигать только текст красной строки абзаца
Предложение после картинки не смещёно, так как оно находится уже на второй строке.
Предложение после картинки не смещёно, так как первой букве первой строки блока предшествует другой элемент строки.
text-indent
Свойство text-indent определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова hanging и each-line могут изменить данное поведение.
Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.
| Начальное значение | 0 |
|---|---|
| Применяется к | блочные контейнеры |
| Наследуется | да |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан или абсолютная длина, а также любые ключевые слова |
| Animation type | интерполируются как вещественные числа с плавающей запятой.»>длина, интерполируются как вещественные числа с плавающей запятой.»>проценты или calc(); |
Синтаксис
Значения
) соотношении отступ зависит от ширины всего блока, внутри которого находится строка. each-line (экспериментальное значение) Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса. hanging (экспериментальное значение) Отступ добавляется ко всем строкам, кроме первой.
Свойство text-indent
Синтаксис
Описание
Свойство text-indent (от англ. «text indent» ‒ «отступ текста») определяет отступ перед первой форматируемой строкой (красной строкой) в блочном контейнере.
Красная строка
| Применяется: | к блочным контейнерам; |
|---|---|
| Наследование: | присутствует; |
| Проценты: | относительно ширины блочного родительского элемента; |
| Медиа : | визуальные. |
Примечание
JavaScript
Поддержка браузерами
Спецификация
Значения
Задаёт отступ фиксированной длины.
Процент от ширины содержательного блока.
each-line Отступ влияет на первую строку блока-контейнера, а также на каждую строку после принудительного разрыва строки, но не влияет на строки после разрыва по символу мягкого переноса. hanging Инвертирует то на какие строки влияет. inherit Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: « 0 ».
Примечание: допускаются отрицательные значения, но при этом в конкретной реализации могут существовать определённые ограничения. Если значение данного свойства является отрицательным или превышает ширину блока, то текст первой строки может выходить за пределы блока. При этом будет ли отображаться текст выходящий за пределы блока зависит от свойства «overflow».
Пример использования
Красная строка
style= «margin:0;» > Есть лица, которые существуют на свете не как предмет, а как посторонние крапинки или пятнышки на предмете. Сидят они на том же месте, одинаково держат голову, их почти готов принять за мебель и думаешь, что отроду ещё не выходило слово из таких уст; а где-нибудь в девичьей или в кладовой окажется просто: ого-го!
CSS: Отступ текста
Форматирование текста
Стандартный вид текста не всегда подходит, как по внешнему виду, так и по цвету, CSS предоставляет обширные возможности, с помощью которых, вы можете кардинально изменить ваш текст, например задав ему цвет, меняя межстрочный интервал, расстояние между буквами или размер текста и многое другое.
Отступ текста
В случае применения свойства text-indent первая строка любого элемента может быть смещена на заданную величину, даже если эта величина отрицательная. Чаще всего это свойство применяется для создания эффекта красной строки у абзацев:
Согласно коду нашего примера первая строка любого абзаца будет сдвинута на 30px.
Свойство text-indent работает только с блочными элементами, его нельзя применять к строчным элементам или вставляемому контенту, такому как картинки. Но если в первой строке блочного элемента, например абзаца, есть картинка, то она будет сдвинута вместе со всем остальным текстом строки.
Отрицательные значения свойства, позволяют сделать текст с выступающей первой строкой. Но, задавая отрицательные значения, нужно учитывать, что часть выступающей строки может выйти за границы элемента или даже может быть обрезана левым краем окна браузера, если элемент находится вплотную к краю. Для избежания таких неприятностей, можно применить внутренний отступ с левой стороны элемента равный выступу:
С text-indent могут применяться любые единицы измерения длины, в том числе и процентные значения. Размер отступа, установленный в процентах, связан с шириной родительского элемента. Например, если установлен отступ равный 50% и абзац занимает всю ширину окна браузера, то первая строка будет начинаться посередине экрана.
Примечание: стоит обратить внимание, что свойство text-indent наследуется, что может приводить к непредвиденным результатам:
Форматирование
Существуют различные свойства для форматирования текста, рассмотрим некоторые из них. Свойство text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым. Для управления строчными и прописными буквами в тексте используется свойство text-transform. Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство letter-spacing:
Как сделать табуляцию или отступ в HTML?
Есть разные способы установки HTML отступов перед текстом. Но для совместимости с различными браузерами и доступности, мы обсудим самые популярные методы:
Рекомендованный способ в CSS и HTML
Как только файл каскадных таблиц стилей создан, откройте его для редактирования и добавьте тот же код, кроме тега и меток комментирования, как показано ниже:
Когда эти шаги выполнены, можно табулировать любой текст, используя тот же самый
Есть и другие варианты. Например, если нужно сместить только первую строку абзаца, то примените приведенный ниже код:
Подсказка: Можно задавать величину отступа в процентах. Например, вместо смещения на 40 пикселей, можно сдвинуть строки на 5% от текущего положения. Можно использовать и длинный пробел при определении нужной ширины.
Рекомендованный метод в HTML
Тут весь текст абзаца смещен на 40 пикселей влево. Другие теги
А здесь только первая строка в абзаце смещается на 40 пикселей слева. Никакие дополнительные строки смещены не будут.
Подсказка : можно задать отступ с помощью процентов. Например, вместо смещения на 40 пикселей, можно заменить значение на 5%, чтобы сдвинуть текст на 5%.
Бонусная подсказка : Можно поменять отступ слева на отступ справа, изменив свойство margin-left на margin-right.
Альтернативный метод
Другой часто применяемый метод, позволяющий создать HTML отступ текста — с помощью
Хотя это намного легче, но есть проблемы совместимости, которые могут возникнуть из-за применения этого решения. Данный тег предназначен для цитирования, а не смещения:
Пожалуйста, опубликуйте свои комментарии по текущей теме статьи. За комментарии, отклики, подписки, лайки, дизлайки низкий вам поклон!
Дайте знать, что вы думаете по данной теме статьи в комментариях. Мы очень благодарим вас за ваши комментарии, подписки, лайки, дизлайки, отклики!