Text indent css: text-indent — CSS: Cascading Style Sheets — Вебджем.рф | Создание и продвижение сайтов

text-indent — Справочник CSS

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ Назад CSS Справочник Далее ❯

Пример

Установить отступ первой строки текста с разными значениями:

div.a {
text-indent: 50px;
}

div.b {
text-indent: -2em;
}

div.c {
text-indent: 30%;
}

Попробуйте сами »

Определение и использование

Свойство text-indent задает отступ первой строки в текстовом блоке.

Примечание: Допускаются отрицательные значения. Первая строка будет отступом влево, если значение отрицательное.

Значение по умолчанию:	0
Унаследованный:	да
Анимируемый:	да. Прочитать о animatable Попробовать
Версия:	CSS1
JavaScript синтаксис:	object.style.textIndent=»50px» Попробовать

Поддержка браузеров

Числа в таблице указывают первая версия браузер, который полностью поддерживает свойство.

Свойство
text-indent	1.0	3.0	1.0	1.0	3.5

CSS Синтаксис

text-indent: length|initial|inherit;

Значения свойств

Значение	Описание	Воспроизвести
length	Определяет фиксированный отступ строки текста в px, pt, cm, em и т.д. Значение по умолчанию 0. Прочитать о Eдиницы длины	Воспроизвести »
%	Определяет отступ строки текста в % от ширины родительского элемента	Воспроизвести »
initial	Устанавливает это свойство в значение индекса. Прочитать о initial	Воспроизвести »
inherit	Наследует это свойство от родительского элемента. Прочитать о inherit

Связанные страницы

CSS Учебник: CSS Текс

HTML DOM Справочник: Свойство textIndent

❮ Назад CSS Справочник Далее ❯

ВЫБОР ЦВЕТА

ТОП Учебники

HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.

CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник

ТОП Справочники

HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник

ТОП Примеры

HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом.

Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

text-indent — Translation into Russian — examples English

These examples may contain rude words based on your search.

These examples may contain colloquial words based on your search.

The ‘word-spacing’ and ‘text-indent‘ properties also eliminate the need for extra whitespace in the document.

Кроме того, свойства ‘word-spacing’ и ‘text-indent‘ исключают необходимость в дополнительном свободном месте.

This can include style-related attributes such as margin-left and text-indent, and other useful states for accessibility information, such as draggable and level (e. g., what heading level is it, in the case of headings).

Это может включать атрибуты, связанные со стилем, такие как margin-left и text-indent

, а также другие полезные состояния для информации о доступности, такие как draggable и level (например, какой уровень заголовка в случае заголовков).

To indent the first line to your paragraphs, you need to use the CSS property text-indent, which allows you to indent the first sentence

Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent, которое позволяет поставить отступ перед первым предложением

There is a very well known technique in web design to hide text on the page by adding a text-indent CSS property of -9999px.

В веб-дизайне широко используется способ, позволяющий спрятать текст у графического заголовка веб-страницы с помощью свойства отступа текста со значением -9999px.

The width and height of each picture (lines 3 and 4 respectively), the property float: left to be located one to the right of other text-indent to delete text that is inside the label and left margin to separate the menu a bit each other.

Ширина и высота каждого снимка (линии З и 4 соответственно), имущество плавать: слева находится один справа от других текстовых абзац удалить текст, который находится внутри тега и левому краю, чтобы отделить меню немного друг от друга.

Possibly inappropriate content

Examples are used only to help you translate the word or expression searched in various contexts. They are not selected or validated by us and can contain inappropriate terms or ideas. Please report examples to be edited or not to be displayed. Rude or colloquial translations are usually marked in red or orange.

Отступ текста CSS

Отступ определяется как дополнительный пробел в начале строки. В CSS отступ текста определяется как дополнительный пробел в начале первой строки. Мы используем свойство «text-indent», чтобы применить отступ к первой строке абзаца. Мы устанавливаем его значение в «px», «em» или также в «%». Мы также устанавливаем отрицательное значение для этого свойства indent-text. Когда мы используем это свойство CSS «text-indent», первая строка блока или абзаца создаст некоторое пространство в начале строки. Это только установит некоторое пространство в начале первой строки и не повлияет на другие строки абзаца или блока. Он не создает места в других строках, кроме первой строки. В этом уроке мы будем использовать это свойство text-indent и установим отрицательные и положительные значения для отступа.

Пример № 1: Для использования этого свойства «text-indent» в CSS у нас должен быть s

какой-то блок данных или абзацев. Для этого нам сначала нужен файл HTML. В этом руководстве мы используем программное обеспечение Visual Studio Code. Yocreate может использовать для этого любой текстовый редактор или блокнот. Когда мы используем это программное обеспечение, мы должны выбрать язык, на котором мы собираемся писать код. Здесь мы выбираем «HTML» в качестве языка.

После этого мы начнем кодирование в этом файле. Также ставим «!» а затем, нажав «Enter», мы получаем основные теги HTML, которые нам нужны во всех HTML-кодах. В теле мы собираемся создать несколько классов «div» с разными именами. Внутри каждого div мы создали абзац с помощью тега «

». Мы создаем три div с разными именами: «a», «b» и «c». Внутри этих div у нас есть абзац. Таким образом, мы создали здесь три абзаца. Мы будем использовать эти три абзаца во всех примерах этого урока. Теперь мы перейдем к файлу CSS, где мы используем свойство text-indent и применим отступ ко всем этим абзацам. Мы также связали файл CSS с этим файлом HTML в теге «head» кода HTML.

Мы используем имя «div» «a», а затем используем свойство «text-indent». Таким образом, он создаст отступ в первой строке абзаца div «a». Первая строка этого абзаца создает пробел в начале строки абзаца. В этом коде мы используем значения в «px». Мы устанавливаем значение «80px» для первого абзаца div. Таким образом, он создаст свободное пространство «80 пикселей» в первой строке и соответствующим образом обработает текст. Затем мы собираемся сделать отступ во втором абзаце div и использовать «b» с «div». Затем мы собираемся использовать отрицательное значение в свойстве text-indent. Для второго абзаца мы применяем отрицательный отступ для установки текста слева.

После этого мы будем использовать последний абзац, а также применим для него свойство text-indent. Мы устанавливаем «30px» для третьего абзаца div. Таким образом, текст первой строки абзаца перемещается на «30 пикселей» вправо и создает пространство «30 пикселей» в начале первой строки. После завершения этого кода сохраните его с расширением файла «.css», а также с именем, которое мы использовали в теге ссылки «HTML». Затем проверьте вывод.

На этом снимке экрана видно, что первый абзац создает пространство только в начале первой строки. Здесь он создает пространство «80px», поскольку мы использовали «80px» в качестве значения свойства «text-indent». Теперь посмотрите на второй абзац, некоторые тексты исчезают с экрана при перемещении влево из-за свойства text-indent. Он делает отступ этого абзаца «-70px», и это относится только к первой строке абзаца. Затем идет последний абзац, где мы используем значение «30px» этого свойства. В этом абзаце он создает пространство «30px» в первой строке.

Пример № 2:

Мы устанавливаем для заголовка «семейство шрифтов» значение «Алжирский», а также выравнивание по центру. Мы устанавливаем его «цвет» на «бордовый». Затем у нас есть заголовок 2. Для этого заголовка мы используем «Times New Roman» в качестве «семейства шрифтов» и «фиолетовый» в качестве «цвета» шрифта. Теперь мы собираемся использовать свойство text-align для всех разделов отдельно. Во-первых, у нас есть «div.a», и мы устанавливаем значения свойства «text-indent» в «em». Здесь для первого абзаца div установлено «10em», а для второго div мы используем отрицательное значение «-5em». И для последнего div мы устанавливаем значение «text-indent» на «2em».

Первая строка первого абзаца имеет отступ «10em» вправо, что означает создание пробела «10em» в первой строке первого абзаца. Затем он применяет отрицательное значение ко второму абзацу и перемещает первую строку второго абзаца влево. Итак, какой-то текст здесь не отображается. И в первой строке третьего абзаца мы используем отступ текста «2em», поэтому он создает пробел или отступ «2em» в первой строке.

Пример № 3:

Мы собираемся стилизовать заголовок здесь, установив «семейство шрифтов» на «Алжирский» и выровняв по «центру». Его цвет настроен здесь на «оранжевый». Затем есть заголовок 2, для которого установлено значение «Calibri» в качестве «семейства шрифтов» и «зеленый» в качестве «цвета» шрифта. Теперь мы используем свойство text-align для каждого div отдельно. Во-первых, у нас есть «div.a», и мы используем процент «%» для установки значений свойства «text-indent». Для первого абзаца div мы используем положительное значение «20%», а для второго div используем отрицательное значение «-10%». Значение «text-indent» для последнего div было установлено на «40%»

В первой строке первого абзаца применяется отступ «20%», что подразумевает создание отступа «20%» в первой строке первого абзаца. Затем второму абзацу присваивается отрицательное значение, а начальная строка второго абзаца перемещается влево, предотвращая появление некоторого текста. Первая строка второго абзаца перемещается на «10%» влево. Мы также используем отступ текста «40%» в первой строке третьего абзаца, что приводит к пробелу или отступу «10%» в первой строке.

Пример № 4:

Установите семейство шрифтов на «Алжирский» и «по центру» в этом заголовке. В этом случае его цвет меняется на «красный». Затем у нас также есть заголовок 2, в котором «Calibri» используется как «семейство шрифтов» и «синий» как «цвет» заголовка. Теперь мы используем атрибут text-align для каждого div отдельно. Во-первых, мы используем «div. a», и мы устанавливаем значения свойства «text-indent» с пикселем на «50px». Для второго абзаца мы устанавливаем значение «text-indent» в «em» и тоже отрицательное. Мы используем «-3em» для второго абзаца div. Для последнего абзаца div мы устанавливаем значение в «%». Ставим «30%» для последнего абзаца. В этом коде мы используем «px», «em», а также «%».

В первом абзаце мы используем «50px» на скриншоте. Он регулирует отступ «50px». Во втором абзаце мы устанавливаем отрицательное значение в «em», которое равно «-3em». Первая строка имеет отступ влево. Для последнего абзаца мы установили значение в «%», которое равно «30%», и вы можете видеть, что первая строка третьего абзаца отступает вправо.

Заключение:

Мы создали это руководство, чтобы подробно изучить «текстовый отступ» в CSS. Здесь мы обсудили, что такое text-indent и как установить отступ в CSS, а также какое свойство CSS мы использовали для отступа текста. Как мы обсуждали в этом уроке, свойство «text-indent» используется для применения отступа к нашему тексту, и в наших примерах мы использовали как отрицательные, так и положительные значения. Это свойство имеет отступ только для первой строки абзаца.

html — CSS: текстовый отступ первой буквы не работает

Задавать вопрос

спросил 7 лет, 2 месяца назад

Изменено 7 лет, 2 месяца назад

Просмотрено 1к раз

Я узнаю о псевдоэлементе :first-letter и попытался сделать отступ, используя типичное свойство и значение text-indent , но это не работает. Отступ текста работает только с margin-left . Любая причина, почему?

HTML:

Алиса начинала очень уставать от того, что сидела рядом с сестрой на берегу и от нечего делать: раз или два она заглядывала в книгу, которую читала сестра, но в ней не было ни слова. картинок или разговоров в ней, «а что толку в книге, — подумала Алиса, — без картинок и разговоров?»

Как и в случае с text-indent, вы можете использовать значения в пикселях или em, чтобы установить значение полей. Вы также можете использовать проценты, но, как и в случае с текстовым отступом, проценты связаны с ширина элемента, содержащего абзац. Потому что это сбивает с толку, чтобы вычислить пространство над и под абзацем в зависимости от его ширины, его легче придерживаться либо значения em, либо пиксели. CSS также предоставляет способ форматирования только части абзаца с помощью :firstletter и псевдоэлементы :first-line (см. рис. 6-16). Технически это не CSS-свойства, но типы селекторов, которые определяют, какая часть абзаца CSS свойства должны применяться к.

С помощью псевдоэлемента :first-letter вы можете создать начальная заглавная буква, чтобы имитировать вид рукописи, написанной от руки.

CSS:

 p: первая буква {
    вес шрифта: полужирный;
    красный цвет;
    отступ текста: 2em;
}

Результат: https://jsfiddle.net/opshtvdy/

HTML
CSS

использовать левое поле в :first-letter.

 р: первая буква {
вес шрифта: полужирный;
красный цвет;
поле слева: 2em;
}

Алиса начинала очень уставать от того, что сидела рядом с сестрой на берегу и от нечего делать: раз или два она заглядывала в книгу, которую читала сестра, но в ней не было ни картинок, ни разговоров. в нем, «и какая польза от книги», подумала Алиса 'без картинок и разговоров?'

Потому что это сбивает с толку, чтобы вычислить пространство над и под абзацем в зависимости от его ширины, проще придерживаться значений em или пикселей. CSS также позволяет форматировать только часть абзаца с помощью псевдоэлементов :firstletter и :first-line (см. рис. 6.16). Технически это не свойства CSS, а типы селекторов, которые определяют, к какой части абзаца должны применяться свойства CSS. С помощью псевдоэлемента :first-letter вы можете создать начальную заглавную букву, чтобы имитировать вид рукописного письма. рукопись.

или текстовый отступ на самом p

 р: первая буква {
вес шрифта: полужирный;
красный цвет;
}
п {
  отступ текста: 2em;
  }

Как и в случае с text-indent, вы можете использовать значения в пикселях или em, чтобы установить значение полей. Вы также можете использовать проценты, но, как и в случае с text-indent, проценты связаны с шириной элемента, содержащего абзац. Потому что это сбивает с толку, чтобы вычислить пространство над и под абзацем в зависимости от его ширины, проще придерживаться значений em или пикселей. CSS также позволяет форматировать только часть абзаца с помощью псевдоэлементов :firstletter и :first-line (см. рис. 6.16). Технически это не свойства CSS, а типы селекторов, которые определяют, к какой части абзаца должны применяться свойства CSS. С помощью псевдоэлемента :first-letter вы можете создать начальную заглавную букву, чтобы имитировать вид рукописного письма. рукопись.

Вы используете text-indent на первой букве, когда вы должны использовать его на самом элементе p . Вы должны использовать его на блочных элементах. Вы можете прочитать больше о text-indent здесь

Вот ваша скрипка с соответствующими правилами CSS. https://jsfiddle.

Text indent css: text-indent — CSS: Cascading Style Sheets