从浏览器

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。

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>

Plunker： https://plnkr.co/edit/tJfLhixTTJ53FVe10ugw?p=preview

我已经在Chrome，Firefox和Safari中进行了测试，并且它在所有这些方面都运行良好。

Answer 2

你应该check this

您可以在不更改浏览器设置的情况下制作可打印的人力资源：

hr {
    display: block;
    height: 1px;
    background: transparent;
    width: 100%;
    border: none;
    border-top: solid 1px #aaa;
}