CSS格式第二行与第一行不同

时间:2011-05-13 16:40:17

标签: html css css3

当文本换行到第二行时,是否有任何纯粹使用CSS(或“正确”标记)来设置段落第二行的样式?一个位置很好的<br />会做到这一点,但我不相信这是好的标记或SEO。

具体来说,我说有一个长2行的段落。我希望第二行的宽度比第一行宽。所以段落有点“像金字塔一样”。但是为了美丽的缘故,我不想使用任何不适当的方法来做这件事。

示例:

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

2 个答案:

答案 0 :(得分:25)

您可以使用:first-line pseudo-element

请参阅: http://jsfiddle.net/X33pY/ - 调整窗口大小以在第一段中添加第二行。

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

以防万一,这可能就是你所追求的:

http://jsfiddle.net/qKRh8/

p {
    white-space: pre
}

答案 1 :(得分:1)

您可以使用:first-line伪类来设置第一行的样式,并且暗示第二行将回退到默认样式。

请参阅:

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