如何将边框底部应用于 DIV 的每一行？答案

【问题标题】：How do I apply a border-bottom to each line of a DIV?如何将边框底部应用于 DIV 的每一行？
【发布时间】：2012-02-17 03:45:06
【问题描述】：

我的代码：

div {
    border-bottom: 1px solid;
}

<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
</div>

由于文本足够长，因此正在进行自动换行。是否可以将 CSS 格式的底部边框应用于每一行文本？此外，是否可以让每个底部边框都为 DIV 的全宽（即使文本仅为线宽的一半或更小）？

【问题讨论】：

标签： html css

【解决方案1】：

text-decoration:underline 可以，但如果您想更好地控制“下划线”（颜色、样式、宽度），您可以这样做：

div {
    border-bottom: 1px solid;
    display:inline;
}

演示：http://jsfiddle.net/ckt8L/

【讨论】：

这几乎就是我想要的。是否可以将内联 div 的宽度设置为 100%？
您想要看起来像横格纸的东西，每行的下划线宽度为 100%？我不知道任何干净的方法，但我可以想到一些 hacky 方法来做到这一点，如果那是你所追求的。
没错！非常感谢您的解决方案。
我最初的想法是使用线条的重复背景图像，但这有一些问题。我认为此时您最好将其作为一个新问题发布。你可以参考这个，但要非常具体地说明你想要什么，你的要求是什么，如果 javascript 是好的，你的实际标记是什么，如果可能的话，提供你想要的结果的屏幕截图。指定您要使用“横格纸”外观。
我认为您接受答案的方式太早了，您可能已经得到了一些聪明的解决方案。此外，我已经建议的不是背景图像吗？它迫使您使用基于像素的行高，并且需要图像（样式更难）......但是，如果这就是您所需要的，GL！

【解决方案2】：

好吧，把文本换成<p>

那么你就可以申请了

p {border-bottom: 1px solid black;}

【讨论】：

这适用于整个段落，但我需要在每一行文本都有底部边框。

【解决方案3】：

你可以在文本上加下划线：

div {
    text-decoration: underline;
}

【讨论】：

@Justin：他的例子说“1px solid”，所以我认为没关系。

【解决方案4】：

一个 div 是一个块元素，而不是那个，使用一个内联的 span。

<style>
div span{
    border-bottom: 1px solid;
} 
</style>
<div>
   <span>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
   </span>
</div>

使用不同的方法查看这个小提琴，使用背景作为边框底部：

http://jsfiddle.net/YcSUQ/3/

【讨论】：

这几乎就是我想要的。是否可以将span 宽度设置为 100%，以便将边框设置为窗口的全宽？
即使文本不够长，也可以将边框扩展到 100% 宽度。但是您需要使用带有点的图像作为背景，该图像会重复给您边框效果：jsfiddle.net/YcSUQ
这只会为一行提供边框，如果文本占据整行。
不，背景重复，尝试减小浏览器的大小。不管怎样，看看这个新的例子：jsfiddle.net/YcSUQ/4