Javascript 在段落的每一行后画水平线

我有一个固定高度的

，里面有一个段落。段落很长，我希望在段落的每一行下面都有一条水平线，以便这条线横跨整个

，如所附图片所示

我该怎么做

---

我尝试添加

文本装饰：下划线，但我需要水平规则来占据父分区的整个宽度。
您可以使用
重复线性渐变来完成此操作



*{
保证金：0；
填充：0；
}
p{
线高：1.2；
背景：-webkit重复线性渐变(
顶部
透明的
透明95%，
黑色95%，
黑色
);
背景：重复线性渐变(
180度，
透明的
透明95%，
黑色95%，
黑色
);
背景尺寸：1.3em；
}
div{
宽度：200px；
保证金：1em自动；
背景：浅蓝色
}

我的同僚们都是精英。乌拉姆·雷拉姆，我明白了，我的脸上充满了动物！我的天啊，我的天啊，我的天啊，我的天啊！伊万尼特，莫迪。准facere，provident voluptatum
加速分娩

这里有一个与paulie_d类似的答案，但方法不同：
不必使用背景大小

它还使用
重复线性渐变
和
em
值，根据字体大小和行高绘制开始和停止颜色

单击可测试不同字体系列和字体大小的示例：


p{
背景：重复线性渐变（到底部，
透明1.7em，
currentcolor 1.7em，
灰色1.8em，/*任何第二种颜色或文本颜色*/
透明1.8em，
透明3em）；
线高：1.29em；
填充：0.6em 0.5em；
边缘：1米；
长方体阴影：插入0.5em白色，插入0.4em白色；/*隐藏部分线条*/
边框：实心；
边界顶部：无；
边框底部：无；
}
/*使用不同字体测试行为*/
p:hover{font-family:courier；字体大小：1.1em；颜色：绿色}
p:focus{font-family:tahoma；字体大小：1.2em；颜色：番茄}
p:active{font-family:georgia；字体大小：0.9em；颜色：紫色}
b{背景：rgba（255200,0,0.5）}
单击文本以捕捉活动状态和焦点状态tristique sentecus et netus et malesuada fames ac turpis egestas。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯·普莱斯特拉特·埃利芬德·利奥。他是一个聪明的人。威斯康辛州的前庭、调味品、康茂德维塔、奥纳雷西特、威斯康辛州。埃涅亚发酵液、精粹葡萄汁调味品、红莓汁、豆豉箭叶。在turpis枕面部进行非enim治疗。乌特·费利斯。事实上，这是一个错误，是一个错误，是一个错误，是一个错误。阿利奎姆·埃拉特·帕特。Nam dui mi，tincidunt quis，accumsan porttitor，facilisis luctus，metus
您的建议只会在段落末尾添加
，但我需要在段落的每一行都加下划线。这也是一个糟糕的建议，因为我需要水平线跨越父段的整个宽度
。我想我已经在帖子里说得很清楚了。请给我一个理由@保利，我不认为我需要解释我的尝试。我会修改这个问题。嗨，请看附在我的OP上的图片。水平规则必须在每一段线下，并占据父div的整个宽度。这就是为什么…？对我来说，它只是在我的段落底部画了一条粗黑线，但我需要在每一段线下非常感谢，但它仍然只是在这一段的末尾画了一条粗线。请看我所附的图片，这些线条用红色画笔标记，并写上“水平规则”。然后你的实现似乎有点不对劲。这确实有效，我添加了结果的图像。请注意，
行高
和
%
值可能需要根据您的要求进行调整。