1

段落の各行に下線を引く必要があります。

<p class="underline">multi-line text multi-line text multi-line text</p><br/>
<p class="underline" style="background-repeat: no-repeat;">single-line text</p>

スタイルは次のとおりです。

.underline { width: 100px; font-size: 12px; line-height: 16px; background: url("underline.svg"); }

そしてunderline.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="16">
  <line x1="0" y1="15" x2="100%" y2="15" style="stroke:black;stroke-width:1" shape-rendering="crispEdges"/>
</svg>

正常に動作しますが、Google Chromeでページをズームしようとすると、次のようになります。

2番目の段落は問題ないように見えることに注意してください。しかし、複数行のパラガルパの上に奇妙な細い線があります。そして、他の線はあいまいです。

問題は、このhtmlを（wkhtmltopdfによって）pdfに変換して印刷すると、奇妙なアーティファクトが発生することです（一部の線が細くなりすぎ、段落の上部にも細い線があります）。

正確な1px幅の線を取得するにはどうすればよいですか？ありがとう！

4

2 に答える 2

0

@thenoviceoofは正しいと思います。CSS でこれを実現する最も簡単で効果的な方法は、タグtext-decoration:underline;のクラスに a を適用することです。p

ここで実際の例を参照してください: http://jsfiddle.net/3UBUG/

于 2011-02-25T12:19:57.867 に答える