javascript - 从浏览器打印重复线性渐变

Question

我有一个 <div> .其中，有一个 <p>在屏幕上看起来像下面的图片

我需要在段落的每一行下面都有水平线(图中红色标记的水平线)。最重要的是水平线应该占据父级的整个宽度 <div>所以text-decoration: underline不会在这里工作。我像这样使用重复的线性渐变绘制线条

p.text--underline {
    line-height: 1.45;
    background: repeating-linear-gradient(
            to bottom,
            transparent calc(1.5em - 1.5px),
            black 1.5em,
            transparent 1.5em,
            transparent calc(3em - 1.5px)
    );
    box-shadow: inset 0 0.5em  white;
}

但问题是水平线在浏览器中可见，但在打印时不可见。我需要它们在纸上可见。如何做到这一点？

Answer 1

您可以用 <span> 包裹每个单词并用每个单词的边界画线 :after .如果 <p> 中的文本，您将需要添加一些 JavaScript不完全在您的控制之下，您不能在服务器上用 span 包装单词。

var p = document.querySelector('p');
var words = p.textContent.split(/\s+/gm);
p.classList.add('container');
p.innerHTML = words.map(function(w) {
  return '<span class="word">' + w + '</span>';
}).join('\n');

.container {
  position: relative;
}

.word:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  border-bottom: 1px solid black;
}

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit diam justo, in vulputate massa sodales egestas. Aenean luctus sapien eleifend ipsum venenatis, nec pharetra sem congue. Quisque nec sem leo. Donec posuere nibh ut nibh vehicula, ut hendrerit mi sollicitudin. Proin sed sapien vel sem ultrices euismod eget quis urna. Nulla facilisi. Sed eu mi ac nulla consequat lobortis ac ac elit. Mauris sit amet ante ac ante pulvinar ultricies a ut ante. Suspendisse metus nulla, porttitor et augue quis, consectetur fermentum lorem. Phasellus metus est, ultrices quis enim porta, facilisis cursus ante. Ut justo quam, suscipit nec facilisis eget, elementum ac lectus. Nulla at auctor ipsum.</p>
</div>

笨蛋: https://plnkr.co/edit/tJfLhixTTJ53FVe10ugw?p=preview

我已经在 Chrome、Firefox 和 Safari 中进行了测试，并且在所有这些平台上都运行良好。