我需要在段落中劃線。Svg背景的1px寬度線
<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>
它工作正常,但是當我試圖在谷歌瀏覽器縮放頁面我得到像this。
請注意,第二段看起來不錯。但是多線paragarpah之上有一條奇怪的細線。其他線條模糊不清。
問題是,當我將這個html轉換爲pdf(由wkhtmltopdf)並打印它時,我得到了奇怪的文物(某些行變得太薄,在段落頂部也有一條細線)。
如何獲得精確的1px寬度線?謝謝!
{text-decoration:underline;}有什麼問題? – thenoviceoof 2011-02-25 05:48:29
我忘了注意,文字裝飾不符合我的要求,即使是空白段落也必須加下劃線。例如,有一段「寬度:500px;高度:60px;行高:20px;」。無論文章中包含多少文字,都應該有3行,寬度爲500px,垂直間距爲20px。 – Denis 2011-02-27 04:36:18