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

Question

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

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

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

那么如何用虚线或虚线下划线显示多行文字？

由于

Answer 1

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

所以你得到了你需要的东西 但是你必须记住，<h2>当然（当然）不再是一个块元素。但是，您可以通过在<h2>中添加<div>来“避免”。

Answer 2

“迟到”，但在某些浏览器中自定义下划线a way with text-decoration-style and text-decoration-line。

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

Answer 3

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。

谢谢，

Answer 4

text-decoration: underline dotted;
text-decoration: underline dashed;