多行虚线或虚线文字 - 下划线

Because CSS text underline only allows a solid line and its position is right at the bottom of strings, I'm using border-bottom plus a little padding to achieve dotted or dashed text underline.

因为CSS文本下划线只允许实线并且它的位置正好在字符串的底部，所以我使用border-bottom加上一点填充来实现虚线或虚线文本下划线。

h2{border-bottom:1px dotted #999; padding-bottom:5px;}

now, the problem is, when the heading (or paragraph, or whatever element) text takes 2 lines or more, the dotted underline simply does what every border does, which is stay on the bottom of the block element. If I use text-underline style, the underline stays with the text, but text-underline only supports a solid line, and as far as I know, no padding.

现在，问题是，当标题（或段落，或任何元素）文本占用2行或更多时，虚线下划线简单地执行每个边框所做的操作，它停留在块元素的底部。如果我使用文本下划线样式，下划线保留文本，但文本下划线仅支持实线，据我所知，没有填充。

So how do I display multi line texts with dotted or dashed underline ?

那么如何显示带有虚线或虚线下划线的多行文本？

Thanks

谢谢

3 个解决方案

#1

h2 {
  border-bottom: 1px dashed #999;
  display: inline;
}

So you receive what you need.
But you have to keep in mind that <h2> is then (of course) no longer a block element. But you can "avoid" that by putting a <h2> in a <div>.

所以你得到了你需要的东西。但是你必须记住，

然后（当然）不再是块元素。但是你可以通过在

中加一个

来“避免”。

#2

A "bit" late, but there's a way with text-decoration-style and text-decoration-line to customize the underline in some browsers.

一点点“迟到”，但是有一种方法可以使用文本装饰风格和文本装饰线来自定义某些浏览器中的下划线。

-moz-text-decoration-line: underline;
-moz-text-decoration-style: dashed;

#3

I was also facing similar issue but with <a> tags. In my case it was css float property that was causing the border to appear only under the last line. So I enclosed the <a> tags with <span> tags and moved the css float:left to <span>. It fixed the issue now bottom border appears under all the lines whenever a long link is wrapped to fit the containing div.

我也面临类似的问题，但有标签。在我的情况下，它是css float属性导致边框仅出现在最后一行之下。所以我用标签包含了标签，并将css float：left移动到。它修复了问题，现在只要包裹长链接以适合包含div，所有行下方都会出现底部边框。

The revised css style and HTML structure is as follows:

修改后的css样式和HTML结构如下：

  a { border-bottom:1px dotted red; }
  span.nav-link { float:left; }

<span class="nav-link"><a href="some-page">Test link</a></span>

Hope it helps someone.

希望它可以帮到某人。

Thanks,

谢谢，