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-line
pseudo-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:
看: