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

和下划线.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 中缩放页面时，我得到了类似的东西。

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

问题是，当我将此 html 转换为 pdf（通过 wkhtmltopdf）并打印时，我得到了奇怪的伪影（有些线条变得太细，段落顶部还有一条细线）。

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

4

2 回答 2

1

如果您只需要 1px 行，只需使用 PNG 作为背景图像。例如，如果您需要 20px 的行间距，您将创建宽度为 1 像素、高度为 21px 的 PNG 图像，然后在该图像的最底部绘制 1x1 像素并使用所需的颜色（您想要的下划线颜色），留下前面20 像素透明。

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

由于 svg 是矢量并且它将根据容器进行缩放，因此您不能真正将线条的宽度/高度设置为恰好 1 个像素。例如，我不得不使用stroke-width: 3它，我的容器的厚度接近 1 像素。

于 2017-11-06T10:44:44.163 回答
0

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

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

于 2011-02-25T12:19:57.867 回答