從瀏覽器重複線性漸變打印

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這是在不改變這樣的瀏覽器設置打印：

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