Html CSS 格式第二行与第一行不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5995121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS format second line differently from first line
提问by Joe Fletcher
Is there any way purely with CSS (or 'proper' markup) to style the 2nd line of a paragraph when the text wraps to a second line? A well placed <br />would do it, but I don't believe that's good markup or SEO.
当文本换行到第二行时，是否有任何方法纯粹使用 CSS（或“适当的”标记）来设置段落的第二行的样式？一个位置优越的人<br />会做到这一点，但我认为这不是好的标记或 SEO。
Specifically, say I have a paragraph that is 2 lines long. I would like the 2nd line to have a wider width than the first line. So the paragraph is a little "pyramid-like". But I don't want to use anything that's not a proper way to do this just for beauty's sake.
具体来说，假设我有一个 2 行长的段落。我希望第二条线的宽度比第一条线宽。所以这段话有点“金字塔式”。但我不想为了美观而使用任何不正确的方法来做到这一点。
Example:
例子：
<p>I am a very long
sentence where my second line is longer.</p>
回答by thirtydot
You can use the :first-linepseudo-element:
您可以使用:first-line伪元素：
See:http://jsfiddle.net/X33pY/- resize the window to make a second line in the first paragraph.
请参阅：http : //jsfiddle.net/X33pY/- 调整窗口大小以在第一段中创建第二行。
p:first-line {
color: red
}
p {
color: blue
}
Just in case, this might be what you're after:
以防万一，这可能是您所追求的：
p {
white-space: pre
}
回答by ADW
You can use the :first-line pseudo-class to style the first line and, by implication, the second line will fall back to the default styling.
您可以使用 :first-line 伪类来设置第一行的样式，暗示第二行将回退到默认样式。
See:
看：
