有没有一种纯CSS(或“适当的”标记)的方式,可以在文本换行到第二行时样式化段落的第二行?放置得当的<br />
可以做到这一点,但我不认为这是良好的标记或SEO。
具体来说,假设我有一个两行长的段落。我希望第二行比第一行更宽。所以段落略微呈“金字塔形”。但我不想出于美观而使用任何不适当的方式。
例如:
<p>I am a very long
sentence where my second line is longer.</p>
::first-line
伪元素:p:first-line {
color: red
}
p {
color: blue
}
万一你需要的是这个,可能是这个:
p {
white-space: pre
}
:first-line
进行盒状格式设置:“:first-line
伪元素类似于内联级元素,但有某些限制。以下属性适用于 :first-line
伪元素:字体属性、颜色属性、背景属性、'word-spacing'、'letter-spacing'、'text-decoration'、'text-transform' 和 'line-height'。用户代理也可能应用其他属性。” - robertc你可以使用:first-line伪类来为第一行设置样式,隐含地,第二行将回退到默认样式。
参见:
<p>我是一个非常长的句子....</p>
。通过下面提供的样式,我可以成功地定位第一行并进行着色,但无法控制宽度。我尝试了width:50%
、width:50px
、margin-right:50px
、padding:30px
,但对宽度没有影响。 - Joe Fletcher