Html indent text: text-indent | htmlbook.ru

Leave a Comment / Html / By /

text-indent | WebReference

Устанавливает величину отступа первой строки блока текста (например, для абзаца <p>). Воздействия на все остальные строки не оказывает. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

Краткая информация

Значение по умолчанию0
НаследуетсяДа
ПрименяетсяК блочным элементам
АнимируетсяДа

Синтаксис

text-indent: <размер> | <проценты>
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div {
  text-indent: {{ playgroundValue }}px;
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-indent</title> <style> P { text-indent: 1.5em; /* Отступ первой строки */ text-align: justify; /* Выравнивание по ширине */ } </style> </head> <body> <p>Огневое нападение бывает пяти видов: первое, когда сжигают людей; второе, когда сжигают запасы; третье, когда сжигают обозы; четвертое, когда сжигают склады; пятое, когда сжигают отряды. </p> <p>Сунь-цзы, Искусство войны. Перевод Николай Конрад.</p> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства text-indent

Объектная модель

Объект.style.textIndent

Спецификация

СпецификацияСтатус
CSS Text Level 3Рабочий проект
CSS TransitionsРабочий проект
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

31213.511
1141
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Текст и шрифт

CSS свойство text-indent

❮ Назад Вперед ❯

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

Направление текста определяется свойством direction.

Если указано отрицательное значение, первая строка будет смещена налево.

Свойство text-indent применяется только к первой строке текста внутри элемента.

Значения «each-line» и «hanging» являются экспериментальными.

text-indent: length | percentage | each-line | hanging | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      text-indent: 100px;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-indent</h3>
    <p>Текст со свойством text-indent.
  Текст со свойством text-indent. Текст со свойством text-indent. Текст со свойством text-indent. Текст со свойством text-indent. Текст со свойством text-indent.</p>
  </body>
</html>

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

Рассмотрим другой пример, где отступ указан в единицах измерения pt, em, % и cm:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.a {
      text-indent: 20pt;
      }
      div.b {
      text-indent: -5em;
      }
      div.c {
      text-indent: 70%;
      }
      div.d {
      text-indent: 4em;
      }
      div.e {
      text-indent: 5cm;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-indent</h3>
    <h4>text-indent: 20pt</h4>
    <div>
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
 
 
  Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
    </div>
    <h4>text-indent: -5em</h4>
    <div>
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
    </div>
    <h4>text-indent: 70%</h4>
    <div>
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
  
    </div>
    <h4>text-indent: 4em</h4>
    <div>
    Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
    <h4>text-indent: 5cm</h4>
    <div>
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
    </div>
  </body>
</html>

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

CSS — Как сделать отступ текста в документах HTML

Фото с Unsplash

Свойство CSS text-indent — это свойство стиля, позволяющее ставить пустую отступ перед первой строкой абзаца, чтобы его было легче читать.

Свойство text-indent принимает числовое значение в единицах CSS (

px , em , rem )

Синтаксис следующий:

 отступ текста: 15px; || 1,5 см; || 1,5 бэр

Теперь попробуем применить отступ к тегам HTML

и

. Я собираюсь сделать отступ 50px , чтобы было легче заметить:

 <стиль>
  .indent {
    отступ текста: 50px;
  }

<дел>
  Привет, мир! Это div, использующий класс отступа. Первая строка
  с отступом на определенное количество пикселей, но не на остальную часть div
  линии.

Теперь это абзац с классом отступа. Как видите, первый строка имеет отступ, как в классе div. текстовый отступ свойство работает с большинством элементов HTML

Результат будет следующим. Отступ отмечен красными полосами:

Результаты отступа текста CSS

Свойство text-indent следует за значением свойства

direction , поэтому, если у вас есть текст с направлением справа налево, просто добавьте свойство direction к своим элементам HTML:

 <стиль>
  . rtl {
    направление: rtl;
  }
  .indent {
    отступ текста: 50px;
  }

<дел>

Теперь давайте посмотрим, как сделать отступ для всего абзаца, а не только для первой строки.

Имейте в виду, что отступ с использованием свойства text-indent повлияет только на первую строку, даже если вы используете тег
для принудительного разрыва между строками:

Следующий HTML-документ:

 <дел>
  Привет, мир! Это абзац, использующий класс отступа.
  
Первая строка имеет отступ на определенное количество пикселей.
  
Но не остальные строки абзаца.

Выведет следующий результат:

Отступ в тексте только для первого абзаца даже при жестком разрыве

Чтобы решить эту проблему, существует экспериментальная спецификация CSS для свойства text-indent под названием each-line , которое предположительно устанавливает отступ для каждой строки абзаца, разделенного тегом
.

Но поскольку это значение экспериментальное, оно пока не поддерживается браузерами.

Когда вам нужно сделать отступ всего абзаца, а не только первого, вам нужно использовать свойство padding-left (или padding-right , если у вас есть направление текста справа налево)

Например, давайте создадим новый селектор класса CSS с именем indent-all , к которому применен стиль padding-left:50px :

 <стиль>
  .indent-все {
    отступ слева: 50px;
  }



  Привет, мир! Это абзац, использующий класс отступа. Первая строка
  с отступом на определенное количество пикселей, но не на остальную часть абзаца
  линии.




  Привет, мир! Это абзац, использующий класс отступа.
  
Первая строка имеет отступ на определенное количество пикселей.
  
Но не остальные строки абзаца.

Поскольку padding-left создает пустое пространство в левой части вашего контента, ваш контент будет иметь отступ независимо от того, когда вы используете жесткий или мягкий разрыв.

Приведенный выше HTML-код выдаст следующий результат:

CSS делает отступ для всего абзаца, используя отступы

Теперь, если у вас есть направление текста справа налево, вам нужно использовать padding-right вместо padding-left .

Следующее правило CSS должно использоваться для направления справа налево:

 .rtl {
  направление: rtl;
}
.indent-все в порядке {
  отступ справа: 50px;
}

Теперь вам просто нужно добавить оба вышеуказанных класса в HTML-тег с направлением справа налево, для которого вы хотите создать отступ.

Как сделать отступ текста в HTML с помощью CSS? – Внештатный разработчик Shopify

Застрял на HTML, отступ текста ? Это не имеет большого значения. Все, что вам нужно, это знать правильный код для отступа текста и правильно его использовать.

Часто кодировщики не могут сделать соответствующий отступ в HTML . Они не используют правильные коды и в конечном итоге сталкиваются с ошибками в своих результатах. Коды отступов просты и отсортированы. Перед применением кода необходимо знать, что свойство text-indent задает отступ первой строки.

Используя эти коды, вы можете сделать отступ даже для первой строки в Html или для определенного абзаца текста . Многие разработчики предпочитают иметь отступы в 4 или 2 пробела. Вы можете сделать свой собственный выбор. Правильный способ — сделать вложенный тег один раз внутри родительского тега . Это позволяет вам иметь симметричный отступ.

 
 Текст абзаца string1 



         Текстовая строка абзаца2

Существует распространенная ошибка, которую делают коды в отступе HTML, — это отступ кода . Обычно они помещают тег открывающего абзаца в отступ, что не даст вам требуемых результатов.

Если вам нужна помощь, вы можете нанять внештатного веб-разработчика в Дубае, чтобы решить проблемы с вашим сайтом.

Ошибка с отступом абзаца показана в примере

 
 Текстовая строка абзаца


Образец текстового абзаца

HTML-отступы с использованием CSS

Самое лучшее в программировании — безграничные возможности. При работе на одном языке не обязательно его придерживаться. У вас есть возможность получить к нему доступ несколькими способами.

Точно так же в HTML-элементе можно сделать отступ текста с помощью CSS. Вам просто нужно знать правильный код, и проблема решена. Простые коды позволяют получить быстрые результаты и избежать проб и ошибок. Для отступа текста абзаца в HTML/CSS   вы можете использовать следующий код:

 

   Текстовая строка абзаца1

Если вы хотите сделать отступ первой строки абзаца определенной длины, вы можете использовать свойство CSS TEXT-INDENT.

Позволяет определить конкретную длину отступа первой строки. Код поможет вам добавить больше спецификаций к тексту на вашей веб-странице.

 п.отступ {
   отступ текста: 25px;
}

В этом коде вы можете использовать любую единицу свойства длины CSS для отступа строки. Выберите проценты в пикселях, em, rem или другие. Это поможет вам получить максимальную настройку страницы в соответствии с вашими требованиями. Используя код, можно настроить разные текстовые строки на странице с разным порядком отступов.

Кроме того, ту же комбинацию кодов можно использовать для обратного отступа. Если вы хотите выделить первую строку в левой части страницы, вы можете использовать отрицательное значение единицы измерения в том же коде.

 п.индент {
  отступ текста: -25px;
}

Код сдвинет первую строку влево на выбранную вами степень.

Чтобы сдвинуть весь абзац влево или вправо, вы можете использовать свойство CSS MARGIN-LEFT. Это делает отступ всего абзаца одновременно.

 p.shifted {
  поле слева: 25px;
}

Для сдвига абзацев вправо можно использовать аналогичный код с другим свойством.