Question

我的代码：

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的全宽（即使文本只是线宽的一半或更小）？

Answer 1

text-decoration:underline可以使用，但是如果你想要更多地控制“下划线”（颜色，样式，宽度），你可以这样做：

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

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

Answer 2

对于一个人来说，将文本包装在<p>

中

然后你可以申请

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

Answer 3

您可以在文字中添加下划线：

div {
    text-decoration: underline;
}

Answer 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/

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

4 个答案: