111

您如何为 html 文本添加下划线，以便文本下方的线是虚线而不是标准下划线？最好，我想在不使用单独的 CSS 文件的情况下执行此操作。我是 html 的新手。

4

11 回答 11

147

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

以下是您可以执行的操作：

<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>
于 2013-03-06T16:24:46.457 回答
68

使用以下 CSS 代码...

text-decoration:underline;
text-decoration-style: dotted;
于 2016-07-13T07:53:07.500 回答
16

如果没有 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>
于 2013-03-06T16:25:55.563 回答
14

HTML5 元素可以给出虚线下划线，因此下面的文本将有虚线而不是常规下划线。当用户将光标悬停在元素上时，title 属性会为用户创建一个工具提示：

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

<abbr title="Hyper Text Markup Language">HTML</abbr>
于 2016-07-11T14:14:27.207 回答
5

如果内容超过 1 行，添加底部边框将无济于事。在这种情况下，您将不得不使用，

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

如果您想在文本和行之间有更多的呼吸空间，只需使用，

text-underline-position: under;
于 2018-10-09T10:12:40.443 回答
4

@epascarello重新格式化了答案：

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

于 2015-12-26T06:54:30.147 回答
3

也许我有点晚了，但只需使用text-decoration: underline dotted，它是一个可以在任何地方使用的单一 CSS 属性。

内联 HTML

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

对于虚线下划线，使用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>

在单独的 CSS 文件中

u {
  text-decoration: underline dotted;
}
于 2021-07-07T14:20:45.177 回答
1

你可以试试这个方法：

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

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

这是假设您希望使用内联样式将所有内容嵌入到 HTML 文件中，而不是使用单独的 CSS 文件或标签。

于 2020-02-05T00:12:14.140 回答
1

您可以使用以下text-decoration属性：

    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
于 2021-10-02T01:23:33.290 回答
0

您可以使用带有dotted选项的边框底部。

border-bottom: 1px dotted #807f80;
于 2020-01-24T07:16:24.013 回答
-2

没有 CSS 也不是不可能。例如作为列表项：

<li style="border-bottom: 1px dashed"><!--content --></li>
于 2015-04-30T09:03:55.750 回答