如何在 HTML 文本下添加虚线

如何在 html 文本下划线，以便文本下面的线是虚线而不是标准下划线？最好不要使用单独的 CSS 文件。我是 HTML 的新手。

165111 次浏览
小开
最佳答案

没有 CSS 是不可能的。事实上，<u>标记只是简单地用浏览器内置的 CSS 将 text-decoration:underline添加到文本中。

Here's what you can do:

<html>
<head>
<!-- Other head stuff here, like title or meta -->


<style type="text/css">
u {
border-bottom: 1px dotted #000;
text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>
小开

如果没有 CSS，基本上就只能使用图像标记。基本上做一个文本的图像，并添加下划线。这基本上意味着您的页面对屏幕阅读器毫无用处。

使用 CSS，这很简单。

HTML:

<u class="dotted">I like cheese</u>

CSS:

u.dotted{
border-bottom: 1px dashed #999;
text-decoration: none;
}

运行示例

示例页

<!DOCTYPE HTML>
<html>
<head>
<style>
u.dotted{
border-bottom: 1px dashed #999;
text-decoration: none;
}
</style>
</head>
<body>
<u class="dotted">I like cheese</u>
</body>
</html>
小开

没有 CSS 也不是不可能。例如，作为一个列表项:

<li style="border-bottom: 1px dashed"><!--content --></li>
小开

通过 @ epascarello重新格式化了答案:

u.dotted {
border-bottom: 1px dashed #999;
text-decoration: none;
}
<!DOCTYPE html>
<u class="dotted">I like cheese</u>

小开

HTML5元素可以提供虚线下划线，这样下面的文本将有虚线而不是普通的下划线。Title 属性在用户将光标悬停在元素上时为用户创建一个工具提示:

注意: 虚线边框/下划线在 Firefox 和 Opera 中默认显示，但 IE8、 Safari 和 Chrome 需要一行 CSS:

<abbr title="Hyper Text Markup Language">HTML</abbr>
小开

使用以下 CSS 代码..。

text-decoration:underline;
text-decoration-style: dotted;
小开

如果内容超过1行，添加底部边框将无济于事。这样的话，你就得用,

text-decoration: underline;
text-decoration-style: dotted;

如果您希望在文本和行之间有更多的喘息空间，只需使用,

text-underline-position: under;
小开

您可以使用边框底部与 dotted选项。

border-bottom: 1px dotted #807f80;
小开

你可以试试这个方法:

<h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>

请注意，如果没有 text-underline-position: under;，您仍然会有一个虚线下划线，但这个属性将给它更多的喘息空间。

This is assuming you want to embed everything inside an HTML file using inline styling and not to use a separate CSS file or tag.

小开

也许我有点晚了，但只要用 text-decoration: underline dotted, it’s a single CSS property that you can use everywhere.

内联 HTML

<u style="text-decoration:underline dotted">I have a dotted underline</u>

For a dashed underline, use text-decoration: underline dashed.

<u style="text-decoration:underline dashed">I have a dashed underline</u>

正如 Darshana Gunawardana 所说，你可以使用 text-underline-position: under，在文本和行之间有更多的空间:

<u style="text-decoration:underline dotted;text-underline-position:under">I have a dotted underline</u>

In a separate CSS file

u {
text-decoration: underline dotted;
}
小开

You can make use of text-decoration properties:

    text-decoration: underline;
text-decoration-style: dotted;
text-decoration-line: underline;
text-decoration-thickness: 1px;

提交答案