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

Question

有没有一种纯CSS（或“适当的”标记）的方式，可以在文本换行到第二行时样式化段落的第二行？放置得当的<br />可以做到这一点，但我不认为这是良好的标记或SEO。

具体来说，假设我有一个两行长的段落。我希望第二行比第一行更宽。所以段落略微呈“金字塔形”。但我不想出于美观而使用任何不适当的方式。

例如：

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

- Joe Fletcher

---

你在我回答之后添加了第二段内容，还是我没有注意到它？考虑到第二段内容，我的当前答案对你没有帮助。 - thirtydot

那是在原来的问题中，但我认为我需要澄清一下。我希望段落是正常的，即没有换行。所以使用<p>我是一个非常长的句子....</p>。通过下面提供的样式，我可以成功地定位第一行并进行着色，但无法控制宽度。我尝试了width:50%、width:50px、margin-right:50px、padding:30px，但对宽度没有影响。 - Joe Fletcher

我现在明白你的意思了（虽然还是有点困惑 :p），我99%确定单凭CSS无法实现，你需要使用JavaScript。 - thirtydot

好的，你证实了我的理论！ ;) 无法完成。我放弃这个样式尝试。 - Joe Fletcher

没错，对于这种情况坚持使用CSS是有道理的。如果你好奇，JavaScript将是这个版本的非常简化版：http://jsfiddle.net/UGBXD/11/ / https://dev59.com/R1XTa4cB1Zd3GeqP5did#5564206 - thirtydot

Answer 1

您可以使用 ::first-line 伪元素:

参见: http://jsfiddle.net/X33pY/ - 调整窗口大小以使第一个段落出现第二行。

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

万一你需要的是这个，可能是这个：

http://jsfiddle.net/qKRh8/

p {
    white-space: pre
}

- thirtydot

---

请记住，正如演示中所示，“第二行”并不是指HTML中的第二行，因为在HTML中，换行符与普通空格字符相同。“第二行”指的是在浏览器上显示的第二行。 - BoltClock

@Bolt：谢谢。我明白了，并在我的答案中添加了一句解释句子。 - thirtydot

请注意，您不能使用 :first-line 进行盒状格式设置：“:first-line 伪元素类似于内联级元素，但有某些限制。以下属性适用于 :first-line 伪元素：字体属性、颜色属性、背景属性、'word-spacing'、'letter-spacing'、'text-decoration'、'text-transform' 和 'line-height'。用户代理也可能应用其他属性。” - robertc

啊，我刚刚意识到了这一点！我不认为这些方法中有任何一个可以帮助我缩小第一行的宽度。 - Joe Fletcher

Answer 2

你可以使用:first-line伪类来为第一行设置样式，隐含地，第二行将回退到默认样式。

参见：

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

- ADW