使用CSS样式化最后一段中的第一行

Question

如何使用CSS使最后一段中的第一句话加粗？ 我还想在这个段落顶部添加额外的填充，以便它可以环绕一个图片。如果我增加浮动图像的底部填充，段落将不会贴在图像左侧边缘下方，而是沿着右侧流动 - 这不是我想要的效果。我给“p”元素绑定了一个类，因为我只想影响某个段落（我没有看到“：last-child”伪元素，也不知道您是否可以在一个元素或类上使用两个伪元素）。

#wf_mainContent_left p.last_wfp:first-line {
padding-top:20px;
font-weight:bold;
color:red;
}

HTML

<p class="last_wfp">This is the first sentence that I want bold and red. This is the second
 sentence that I don't want that treatment.</p>

当我只想要第一句话加粗时，这个代码却将两个句子都加粗，即使它们在同一行上。根据这篇教程，应该可以做到只让第一句话加粗。并且，这不会影响填充。我试过添加<br>标签，但它会添加太多的空格。我还尝试了给<br>标签设置样式，但根据我刚刚阅读的这篇文章，这是不可能的。无论如何，我只想让第一行加粗，而不是两个句子。

- Chris22

Answer 1

（我没有看到“：last-child”伪元素，也不知道您是否可以在一个元素或类上使用两个伪元素）

:last-child是CSS3中的伪类，而不是伪元素，因此您始终可以将:first-line附加到带有它的选择器。

如果您不担心浏览器兼容性问题，可以轻松地使用以下内容：

#wf_mainContent_left p:last-child:first-line {
    padding-top:20px;
    font-weight:bold;
    color:red;
}

如果需要兼容性，建议继续使用现有的CSS类解决方案。

至于br产生过多空白的问题，可以尝试减小p的line-height值。

- BoltClock

---

BoltClock，非常感谢您提供的详细信息！您回答了我的关于使用两个伪类（我经常混淆元素和类）的问题。我必须编写IE7兼容的代码。整个HTML内容都散布着小的加粗和彩色文本处理（以突出强调等）。我很讨厌我无法隔离第一句话。CSS的first-line就是这样的，如果我的容器能够在同一行上容纳多个句子，那么整行就会获得样式。我必须使用span标签。 - Chris22

BoltClock，谢谢！我很希望能够这样做，但是减小行高会违反内容可读性的规格要求。 - Chris22

Answer 2

@BoltClock拥有CSS答案。

如果您正在寻找跨浏览器兼容性，并愿意使用js，可以执行以下操作：

CSS

.last_bold{
    font-weight:bold;
    color:red;
    padding-top:2em;
    display:inline-block;
}

var a = $('.last_wfp').text();
var b = a.split('. ');

$('.last_wfp').html('<span class="last_bold">' + b[0] + '</span>' + '. ' + b[1]);

编辑

根据mr.nicksta的观察：

查找句点的第一个索引，然后从开头创建子字符串可能更有效？而且这种方法假定每个段落元素只有两个句子，任何进一步的句子都会丢失。

这是修订后的代码，应该可以处理任意数量的句子。

var a = $('.last_wfp').text();
var b = a.slice(0, a.indexOf('. '));
var c = a.slice(a.indexOf('. '), a.length);

$('.last_wfp').html('<span class="last_bold">' + b + '</span>' + c);

修订后的示例：http://jsfiddle.net/jasongennaro/3ZKP9/5/

- Jason Gennaro

---

Jason，谢谢。我想我会使用这个解决方案，因为我在整个静态网站中有几段需要这种处理的内容。是否可以标记两个答案？ - Chris22

可能更有效的方法是查找句点的第一个索引，然后从开头创建子字符串到该位置？这种方法假定每个段落元素只有两个句子，任何进一步的句子都会丢失。请参见http://jsfiddle.net/3ZKP9/3/。 - WickyNilliams

Nicksta先生，感谢您的评论。我已将此问题标记为已回答，并检查了我的代码。幸运的是，所有段落都只有两个句子，但还是感谢您指出。我正在学习JS和jQuery。您会如何编写“查找第一个句点的索引，然后从开头创建一个子字符串”的代码？ - Chris22

@Chris22，我根据mr.nicksta的评论进行了编辑。 - Jason Gennaro

没问题，伙计们，Jason的修订工作做得很好。再加上一点代码，你就可以把它变成一个jQuery插件，适用于任何元素、任意数量的元素，并且可以接受选项来自定义行为 :) 我有点无聊（最近我一直喜欢写jQuery插件），所以我冒昧做了一下：http://jsfiddle.net/3ZKP9/8/ 享受吧！ - WickyNilliams

Answer 3

第一行伪元素代表文本的第一行格式化。它应该在块级元素、内联块、表格标题或表格单元格中。

它不考虑您的符号（点回车...），仅基于格式和块大小。

请注意浏览器的兼容性。您可以在此处找到一个好的图片：http://reference.sitepoint.com/css/pseudoelement-firstline

有关您问题的其他部分，请参见其他答案，我不会复制粘贴。

- Guilhem Hoffmann