/css/pseudo-element_first-line:> Псевдоэлемент первой строки_

Псевдоэлемент :first-line (::first-line)

Синтаксис

CSS 1‒2.2
CSS 3
[селектор]:first-line { свойства }

Описание

Псевдоэлемент :first-line указывает веб-браузеру, что необходимо отформатировать первую строку абзаца в соответствии с заданными свойствами стиля. При этом первая строка определяется от начала текста и до автоматического перевода текста на новую строку. (Автоматического перевод осуществляется веб-браузером для того, что бы весь текст мог поместиться в границах родительского элемента.)

Искусственное форматирование кода элемента
Искусственное форматирование содержимого элемента с псевдоэлементом «:first-line»

Примечание

При изменении размеров элементов содержащих текст или других действиях способствующих изменению положения слов текста на экране (при переводе текста с первой строки), стили применяются исключительно только к словам (символам) находящимся в первой строке.

Условия использования

Свойства, применяемые к псевдоэлементу «:first-line»:

  • свойства «font»;
  • свойства «background»;
  • «color»;
  • «word-spacing»;
  • «letter-spacing»;
  • «text-decoration»;
  • «text-transform»;
  • «line-height».

Поддержка браузерами

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

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


Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлемент ::first-line</title>
<style type="text/css">
p::first-line { color: red; }
</style>
</head>
<body>
<h1>Форматирование первой строки абзаца</h1>
<article>
<h2>8 февраля.</h2>
<p>Андрей (слуга брата Юлия) все больше шалеет, даже страшно.</p>
<p>Служит чуть не двадцать лет и всегда был неизменно прост, мил, разумен, вежлив, сердечен к нам. Теперь точно с ума спятил. Служит еще аккуратно, но, видно, уже через силу, не может глядеть на нас, уклоняется от разговоров с нами, весь внутренне дрожит от злобы, когда же не выдерживает молчанья, отрывисто несет какую-то загадочную чепуху.</p>
</article>
<address><b>И.А. Бунин, «Окаянные дни»</b></address>
</body>
</html>
Псевдоэлемент ::first-line