Question

我需要为段落中的每一行加下划线。

<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"); }

and 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中缩放页面时，我得到this之类的内容。

请注意，第二段看起来很好。但是在多行paragarpah的顶部有一条奇怪的细线。其他线路模糊不清。

问题在于，当我将这个html转换为pdf（通过wkhtmltopdf）并打印它时，我会得到奇怪的文物（有些线条变得太薄，在顶部的段落上也有一条细线）。 / p>

如何获得精确的1px宽度线？谢谢！

Answer 1

如果您需要1px线，只需使用PNG作为背景图像。例如，如果行之间需要20px的间距，则可以创建宽度为1像素，高度为21像素的PNG图像，然后使用所需的颜色（所需的下划线颜色）在此图像的最底部绘制1x1像素。 20像素透明。

然后，如果需要，您可以使用background-position属性调整定位。

由于svg是矢量，它将根据容器进行缩放，因此您无法将线条的宽度/高度精确设置为1像素。例如，我必须使用stroke-width: 3，我的容器厚度接近1像素。

Answer 2

我认为 @thenoviceoof 是对的。在CSS中实现此目的的最简单有效的方法是将text-decoration:underline;应用于p标记的类。

请参阅此处的工作示例：http://jsfiddle.net/3UBUG/

Svg 1px宽度线为背景

2 个答案: