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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:35:43  来源:igfitidea点击:

CSS format second line differently from first line

htmlcss

提问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:

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

http://jsfiddle.net/qKRh8/

http://jsfiddle.net/qKRh8/

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:

看:

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

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