CSS 多行虚线或虚线文本-下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4365394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
multi line dotted or dashed text-underline
提问by Henson
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 行或更多行时，虚线下划线只是做每个边框的作用，即留在块元素的底部。如果我使用 text-underline 样式，则下划线与文本保持一致，但 text-underline 仅支持实线，据我所知，没有填充。
So how do I display multi line texts with dotted or dashed underline ?
那么如何用点划线或虚线下划线显示多行文本呢？
Thanks
谢谢
回答by thedom
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>.
所以你会收到你需要的东西。
但是您必须记住，<h2>那时（当然）不再是块元素。但你可以“避免”，通过把一个<h2>在<div>。
回答by arnaudbey
A "bit" late, but there's a way with text-decoration-style and text-decoration-lineto customize the underline in some browsers.
“有点”晚了，但是有一种方法可以使用 text-decoration-style 和 text-decoration-line在某些浏览器中自定义下划线。
-moz-text-decoration-line: underline;
-moz-text-decoration-style: dashed;
回答by SarabjitSingh
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.
我也面临着类似的问题，但有 <a> 标签。就我而言，是 css float 属性导致边框仅出现在最后一行下方。所以我用 <span> 标签将 <a> 标签括起来，并将 css float:left 移动到 <span>。它修复了这个问题，现在每当长链接被包裹以适合包含的 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,
谢谢，
