如何在 CSS 中使用自定义下划线和换行符？答案

【问题标题】：How to use custom underline with breakline in CSS?如何在 CSS 中使用自定义下划线和换行符？
【发布时间】：2014-07-03 13:00:33
【问题描述】：

我想用背景设计我的链接。

当链接短时，我的背景没有问题，但我的链接太长，我有一个断线，我的背景不再起作用。我不想使用text-decoration: underline，因为它不是同一个设计（自定义点缀它们之间的空格）

HTML：

<a href="#">Ceci est un menu très long</a>
<a href="#">Blabl</a>

CSS：

a {  
   background: url(dotted.jpg) repeat-x;
}

这是我的问题：

是否可以这样做，如下所示？

和：

【问题讨论】：

您能否展示您正在使用的 CSS，以便我们帮助您修改？
将元素设置为 display:inline。要在它们之间换行，您需要一个
或任何其他显示为块级元素的标记

标签： html css line-breaks dotted-line

【解决方案1】：

你可以试试这个：

a {
  display: inline-block;
  max-width: 100px;
  text-decoration: none;
}

span {
  border-bottom: 1px dotted;
}

&lt;a href='#'&gt;&lt;span&gt;click here to do something&lt;/span&gt;&lt;/a&gt;

【讨论】：

是的，这样就可以了……而且你打字比我快；）

【解决方案2】：

即使听起来很奇怪，您也可以尝试使用大笔保证金 :)：DEMO

a {
    border-bottom:1px dotted;
    text-decoration:none;
    margin-right:100%;
}

【讨论】：

我怀疑这会产生负面影响
@AlexW 什么样的？，它可能什么都不做
@AlexW 一对测试：jsfiddle.net/z545p/2你还有其他想法吗？

【解决方案3】：

你可以试试这个：

HTML：

<a href='#'><span>click here to do something</span></a>

CSS：

a{
 display:inline-block;
 max-width:100px;
 text-decoration:none;
}
span{
 border-bottom: 1px dashed;
}

DEMO

【讨论】：

【解决方案4】：

如果您想要个性化设计，您可以使用 border-image also 但 Ie11...

【讨论】：

【解决方案5】：

虚线下划线无需添加图片。您可以简单地使用 css 的border-bottom 属性。

<a href="#">Ceci est un menu très bla bla bla bla nla bla bla bla nla</a> 

a{
  border-bottom : 2px dotted #CCC;
  text-decoration : none;  
 }

访问http://jsfiddle.net/mijoemathew/zhp6D/ 测试代码。

【讨论】：

【解决方案6】：

您可以在现代浏览器中使用border-image 属性执行此操作：http://codepen.io/pageaffairs/pen/Gdxpg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {
    width: 120px;
}

a {
    text-decoration: none;  
    line-height: 1.6em; 
    text-transform: uppercase;
    border-width: 0 0 9px 0;
    -webkit-border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat; /* Safari */
    -o-border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat;; /* Opera */
    border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat;;
}

</style>
</head>
<body>

<div><a href="">Some text with an underline and background</a></div>

</body>
</html>

【讨论】：

看起来不错，但虚线不一样...这就是我使用自定义背景的原因
用border-image 的例子更新了我的答案。

【解决方案7】：

只需省略跨度并制作 a{display:inline}。

<a href='#'>click here to do something</a>

a {
 display:inline;
 text-decoration:none;
 border-bottom: 1px dotted;
}

Fiddle

更干净，工作起来就像一个魅力。

【讨论】：