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

我有一个<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;
}

但是问题在于，水平线在浏览器中可见，但在打印时不可见。我需要它们在纸上可见。这该怎么做？

最佳答案

您可以使用<span>包裹每个单词，并在每个单词的:after边框处绘制线条。如果<p>中的文本未完全在您的控制之下，并且您无法在服务器上用跨号将单词换行，则需要添加一些JavaScript。

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中进行了测试，并且在所有这些工具中均能正常工作。

关于javascript - 从浏览器打印重复的线性渐变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46388181/