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

【问题标题】：CSS format second line differently from first lineCSS 格式第二行与第一行不同
【发布时间】：2011-05-13 16:40:17
【问题描述】：

当文本换行到第二行时，是否有任何方法纯粹使用 CSS（或“适当”标记）来设置段落第二行的样式？一个很好的 <br /> 会这样做，但我不认为这是好的标记或 SEO。

具体来说，假设我有一个 2 行长的段落。我希望第二行的宽度比第一行宽。所以这个段落有点“金字塔式”。但我不想为了美观而使用任何不合适的方法来做到这一点。

例子：

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

【问题讨论】：

您是在我写完答案后将第二段添加到您的问题中，还是我没有注意到？一旦你考虑了第二段，我目前的回答对你没有帮助。
那是在最初的问题中，但我想我需要澄清一下。我希望段落正常，即没有换行符。所以<p>I am a very long sentences....</p>。使用下面提供的样式，我可以成功定位第一行着色，但不能定位宽度。我试过width: 50%、width: 50px、margin-right:50px、padding: 30px，但对宽度没有影响。
我明白你现在想要的是什么（尽管它仍然令人困惑：p），我 99% 确信 CSS 不能单独完成。你必须使用 JavaScript。
好吧，那你证实了我的理论！ ;) 做不到。将放弃这种造型尝试。
是的，这样的事情坚持使用 CSS 是有意义的。如果你好奇的话，JavaScript 会是一个非常精简版：jsfiddle.net/UGBXD/11 / stackoverflow.com/questions/5529936/…

标签： html css

【解决方案1】：

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

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

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

以防万一，这可能是您所追求的：

p {
    white-space: pre
}

【讨论】：

请记住，如小提琴所示，“第二行”不是指 HTML 中的第二行，因为在 HTML 中，换行符与普通空格字符相同。 “第二行”是指浏览器上显示的第二行。
@Bolt：谢谢。我对此有所了解，并在我的回答中添加了一个解释句。
请注意，您不能使用:first-line 进行框格式化：“:first-line 伪元素类似于内联元素，但有一定的限制。以下属性适用于a :first-line 伪元素：字体属性、颜色属性、背景属性、'word-spacing'、'letter-spacing'、'text-decoration'、'text-transform'和'line-height'。也可以应用其他属性。”
啊，这就是我刚刚意识到的！我认为这些都不会帮助我缩小第一行的宽度。

【解决方案2】：

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

见：

【讨论】：