以不同的方式设置文本装饰或在每一行上添加边框答案

【问题标题】：Style text-decoration differently or make a border on each line以不同的方式设置文本装饰或在每一行上添加边框
【发布时间】：2011-05-19 17:55:33
【问题描述】：

我遇到了一个非常具体的 CSS 问题。我试图让一段文本有一个底部边框：每行点缀 1px，同时避免编写多余的标记。

显然p {border-bottom:1px dotted #000;} 不起作用，因为它只会在 p 标签的最后一行设置一个border-bottom。另一方面，text-decoration 给出了正确的下划线，但不能设置为虚线。

所以基本上我想知道是否有比确定何时有新行并添加跨度然后使用边框底部设置样式并最终导致严重混乱的标记更好的方法。

【问题讨论】：

标签： css border

【解决方案1】：

您可以尝试制作一个模拟虚线的背景，然后在您的段落中使用它。只需确保其高度与段落的 line-height 属性具有相同的值，以便正确匹配行。

例如，如果你希望你的行是一个 3px 的破折号和一个 1px 的空间，那么你将制作一个 4px 宽 x X 像素高的图像（其中 X 当然是你的文本行的高度），并且只需它重复。

希望这会有所帮助。

【讨论】：

是的，我很早就尝试过这个选项，但很快意识到对所有浏览器的控制不够具体。行高中的 0.2px 偏移量足以让它错位。不过想法不错。
@Jonas：如果您使用固定像素字体大小并以像素为单位声明line-height 属性以匹配背景图像的高度，它应该在所有浏览器中都能正常工作，尤其是在您添加文档类型时到您的页面，以确保它不会以怪癖模式呈现。恕我直言，这将是您最好的选择。
我第一次尝试时似乎没有足够的注意力。完美适用于 FF、Chrome、Safari、IE7+。对我来说已经足够好了。感谢您让我重温它！
@Jonas：很高兴能帮上忙！ :)

【解决方案2】：

由于border-bottom 仅适用于由其选择器标识的元素，除了使用<span> 标签（或其他标签）将文本包装在每个<p> 中之外，我看不到另一种方法。您可以通过在所有 p 标签内定位 span 标签立即来避免恼人的故障：

p > span:first-child {border-bottom:1px dotted #000;}

<p><span>this is a paragraph with a first-child span and a dotted underline<span></p>
<p>this is a paragraph with no first-child span <b>this is bold</b> <span>and this span is ignored<span></p>

【讨论】：