在段落的每一行之后绘制水平线

Question

我有一个<div>固定高度，里面有一个段落。段落很长，我希望在段落的每一行下面都有一条水平线，以便该线跨越<div>的整个宽度，如附图所示。

我该怎么做？

我尝试添加text-decoration: underline，但我需要水平规则来占用父div的整个宽度。

Answer 1

您可以使用repeating-linear-gradient。

执行此操作

* {
  margin: 0;
  padding: 0;
}

p {
  line-height: 1.2;
  background: -webkit-repeating-linear-gradient(
    top,
    transparent,
    transparent 95%,
    black 95%,
    black
  );
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 95%,
    black 95%,
    black
  );
  background-size: 1.3em;
}

div {
  width: 200px;
  margin: 1em auto;
  background:lightblue
}

<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam rerum, explicabo repellendus animi aliquam facilis! Quidem nulla, odit nesciunt quis veniam corporis voluptates ipsum laboriosam autem! Eveniet, modi. Quasi facere, provident voluptatum
    laborum expedita impedit.</p>
</div>

Answer 2

这里是对paulie_d的类似答案，采用不同的方法：不必使用background-size。

它还使用带有repeating-linear-gradient值的em来根据字体大小和行高来绘制开始和停止颜色。

可点击示例以测试不同的font-family和font-size：

＆＃13;

＆＃13;

p {
  background:repeating-linear-gradient(to bottom, 
    transparent 1.7em, 
    currentcolor 1.7em , 
    gray 1.8em, /* any second color or textcolor */
    transparent 1.8em,
  transparent 3em);
  line-height:1.29em;
  padding:0.6em 0.5em;
  margin:1em;
  box-shadow:inset 0 0.5em  white, inset 0 0 0 0.4em white;/* to hide parts of the lines */
  border:solid;
  border-top:none;
  border-bottom:none;
}
/* test behavior with different  fonts */
p:hover {font-family:courier; font-size:1.1em;color:green}
p:focus {font-family:tahoma;font-size:1.2em;color:tomato}
p:active {font-family:georgia;font-size:0.9em;color:purple}
b {background:rgba(255,200,0,0.5)}

＆＃13;

<p tabindex="0"><b>click text to catch active and focus state</b>  <a href="#nogo">catch and remove focus from paragraph </a>tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

＆＃13;

＆＃13;

＆＃13;

Box-shadow：inset用于隐藏边框线。

您也可以使用背景剪辑代替插入阴影：

＆＃13;

＆＃13;

p {
  background:repeating-linear-gradient(to bottom, 
    transparent 1.7em, 
    currentcolor 1.7em , 
    gray 1.8em, /* any second color or textcolor */
    transparent 1.8em,
  transparent 3em);
  line-height:1.29em;
  padding:0.6em 0.5em;
  margin:1em;
  background-clip:content-box;
  border:solid;
  border-top:none;
  border-bottom:none;
}
/* test behavior with different  fonts */
p:hover {font-family:courier; font-size:1.1em;color:green}
p:focus {font-family:tahoma;font-size:1.2em;color:tomato}
p:active {font-family:georgia;font-size:0.9em;color:purple}
b {background:rgba(255,200,0,0.5)}

＆＃13;

<p tabindex="0"><b>click text to catch active and focus state</b>  <a href="#nogo">catch and remove focus from paragraph </a>tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

＆＃13;

＆＃13;

＆＃13;