html - 如何使用css为段落中的每一行文本放置行分隔符？

Question

我正在尝试使用 css 在文本行之间显示带有行分隔符的段落。在对css做了一些研究之后，我只发现了text-decoration和<hr>标签。在我的情况下，这些都不起作用。

<div  style="text-decoration:underline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor est, condimentum id fringilla eget, vulputate nec odio. Fusce a metus feugiat, euismod urna eu, pretium lacus. Aenean semper sollicitudin felis eget viverra. Mauris feugiat sem non arcu malesuada rhoncus. Sed placerat in dolor eu dignissim. Proin aliquam odio non arcu hendrerit, ut ultrices ex dignissim. Suspendisse convallis ultricies nulla id vehicula. Sed et sem bibendum, 
</div>

我没有关于运行时行数的任何信息，所以我不能使用 <hr>标签。
期望的输出:

first line of text in a paragraph 
---------------------------------
second line of text in the same p
---------------------------------
third line of text same paragraph
---------------------------------
and so on. End of paragraph. 

请注意，文本的最后一行下方没有行。

Answer 1

后台可以做到这一点。您只需要调整 line-height和 padding-bottom基于您使用的字体

.box span {
  background: linear-gradient(black, black) bottom/100% 1px no-repeat;
  padding-bottom: 0.2em; /* you may have to adjust this */
}

.box {
  overflow: hidden; /* hide the last line */
  line-height: 1.3em; /* you may have to adjust this */
  /* text-align:justify uncomment this to justify the text*/
}

<div class="box">
  <span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor est, condimentum id fringilla eget, vulputate nec odio. Fusce a metus feugiat, euismod urna eu, pretium lacus. Aenean semper sollicitudin felis eget viverra. Mauris feugiat sem non arcu malesuada rhoncus. Sed placerat in dolor eu dignissim. Proin aliquam odio non arcu hendrerit, ut ultrices ex dignissim. Suspendisse convallis ultricies nulla id vehicula. Sed et sem bibendum, 
</span>
</div>

<div class="box" style="font-size:20px;">
  <span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor est, condimentum id fringilla eget, vulputate nec odio. Fusce a metus feugiat, euismod urna eu, pretium lacus. Aenean semper sollicitudin felis eget viverra. Mauris feugiat sem non arcu malesuada rhoncus. Sed placerat in dolor eu dignissim. Proin aliquam odio non arcu hendrerit, ut ultrices ex dignissim. Suspendisse convallis ultricies nulla id vehicula. Sed et sem bibendum, 
</span>
</div>

Border 也可以这样做:

.box span {
  border-bottom:1px solid black;
  padding-bottom: 0.1em; /* you may have to adjust this */
}

.box {
  overflow: hidden; /* hide the last line */
  line-height: 1.3em; /* you may have to adjust this */
  /* text-align:justify uncomment this to justify the text*/
}

<div class="box">
  <span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor est, condimentum id fringilla eget, vulputate nec odio. Fusce a metus feugiat, euismod urna eu, pretium lacus. Aenean semper sollicitudin felis eget viverra. Mauris feugiat sem non arcu malesuada rhoncus. Sed placerat in dolor eu dignissim. Proin aliquam odio non arcu hendrerit, ut ultrices ex dignissim. Suspendisse convallis ultricies nulla id vehicula. Sed et sem bibendum, 
</span>
</div>

<div class="box" style="font-size:20px;">
  <span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor est, condimentum id fringilla eget, vulputate nec odio. Fusce a metus feugiat, euismod urna eu, pretium lacus. Aenean semper sollicitudin felis eget viverra. Mauris feugiat sem non arcu malesuada rhoncus. Sed placerat in dolor eu dignissim. Proin aliquam odio non arcu hendrerit, ut ultrices ex dignissim. Suspendisse convallis ultricies nulla id vehicula. Sed et sem bibendum, 
</span>
</div>

如果你想跨越整条线，另一个想法:

.box {
  overflow: hidden;
  font-size:15px;
  line-height: 1.4em; 
  background:
    repeating-linear-gradient(to bottom,transparent 0 calc(1.4em - 1px), black 0 1.4em)
     0 0/100% calc(100% - 1em);
  /* text-align:justify uncomment this to justify the text*/
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor est, condimentum id fringilla eget, vulputate nec odio. Fusce a metus feugiat, euismod urna eu, pretium lacus. Aenean semper sollicitudin felis eget viverra. Mauris feugiat sem non arcu malesuada rhoncus. Sed placerat in dolor eu dignissim. Proin aliquam odio non arcu hendrerit, ut ultrices ex dignissim. Suspendisse convallis ultricies nulla id vehicula. Sed et sem bibendum, 
</div>

<div class="box" style="font-size:20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor est, condimentum id fringilla eget, vulputate nec odio. Fusce a metus feugiat, euismod urna eu, pretium lacus. Aenean semper sollicitudin felis eget viverra. Mauris feugiat sem non arcu malesuada rhoncus. Sed placerat in dolor eu dignissim. Proin aliquam odio non arcu hendrerit, ut ultrices ex dignissim. Suspendisse convallis ultricies nulla id vehicula. Sed et sem bibendum, 
</div>