多行虚线或虚线文本下划线答案

【问题标题】：multi line dotted or dashed text-underline多行虚线或虚线文本下划线
【发布时间】：2011-05-20 21:45:17
【问题描述】：

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

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

现在，问题是，当标题（或段落，或任何元素）文本占用 2 行或更多行时，虚线下划线只是做了每个边框所做的事情，即留在块元素的底部。如果我使用 text-underline 样式，则下划线与文本保持一致，但 text-underline 仅支持实线，据我所知，没有填充。

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

谢谢

【问题讨论】：

标签： css

【解决方案1】：

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

所以你会收到你需要的东西。
但是您必须记住，<h2>（当然）不再是块元素。但是您可以通过将<h2> 放在<div> 中来“避免”这种情况。

【讨论】：

谢谢。是的，这就是我需要的。实际上我使用的是
，它是否被视为块元素并不重要，因为它也在

中。
更新：再想想，它需要是一个块元素。如果它是内联元素，则文本不能覆盖整个容器宽度，我不能使用 text-align justify 来对齐它。对不起，如果我没有说清楚
我真的不知道你最后的评论是什么意思......你能解释得更详细一点吗？ :)
@Henson，如果你将它包装在 div 中并在其上设置 text-align（例如 jsfiddle.net/gaby/mgDqx）？
@Gaby：当场。 text-align 必须在容器中。 @大家：谢谢

【解决方案2】：

有点晚了，但有a way with text-decoration-style and text-decoration-line 可以在某些浏览器中自定义下划线。

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

【讨论】：

【解决方案3】：

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

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

&lt;span class="nav-link"&gt;&lt;a href="some-page"&gt;Test link&lt;/a&gt;&lt;/span&gt;

希望它对某人有所帮助。

谢谢，

【讨论】：

【解决方案4】：

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

【讨论】：