CSS-формат второй строки отличается от первой строки

Question

Есть ли способ чисто с помощью CSS (или «правильной» разметки) стилизовать 2-ю строку абзаца, когда текст переносится на вторую строку? Хорошо размещенный <br /> сделает это, но я не верю, что это хорошая разметка или SEO.

В частности, скажем, у меня есть параграф длиной в 2 строки. Я хотел бы, чтобы 2-я строка была шире, чем первая. Таким образом, абзац немного "похож на пирамиду". Но я не хочу использовать что-то, что не подходит для этого просто ради красоты.

Пример:

<p>I am a very long 
sentence where my second line is longer.</p>

Answer 1

Вы можете использовать псевдоэлемент :first-line :

См .: http://jsfiddle.net/X33pY/ - изменить размер окна, чтобы сделать вторую строку в первом абзаце.

p:first-line {
    color: red
}
p {
    color: blue
}

---

На всякий случай, это может быть то, что вы ищете:

http://jsfiddle.net/qKRh8/

p {
    white-space: pre
}

Answer 2

Вы можете использовать псевдокласс: first-line для стилизации первой строки и, косвенно, вторая строка вернется к стилю по умолчанию.

См:

http://www.w3.org/TR/CSS2/selector.html#pseudo-elements