Question

如何为html文本加下划线，使文本下方的行是点缀而不是标准下划线？最好，我想这样做而不使用单独的CSS文件。我是html的新手。

Answer 1

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

以下是您可以做的事情：

<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>

Answer 2

如果没有CSS，你基本上都不习惯使用图片标签了。基本上制作文本图像并添加下划线。这基本上意味着您的页面对屏幕阅读器毫无用处。

使用CSS，很简单。

<强> HTML：

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

<强> CSS：

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

Running Example

示例页面

<!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>

Answer 3

使用以下CSS代码......

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

Answer 4

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

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

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

Answer 5

通过 @epascarello 重新格式化答案：

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

<!DOCTYPE html>
<u class="dotted">I like cheese</u>

Answer 6

如果内容多于1行，则添加底部边框将无济于事。在这种情况下，您必须使用

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

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

text-underline-position: under;

Answer 7

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

border-bottom: 1px dotted #807f80;

Answer 8

您可以尝试以下方法：

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

请注意，如果没有text-underline-position: under;，您的下划线仍会带有虚线，但是此属性会为其提供更多的呼吸空间。

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

Answer 9

我可能有点晚了，但只需使用 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;
}

Answer 10

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

tbl_shifts

如何在HTML文本下添加虚线下划线

10 个答案:

内嵌 HTML

在单独的 CSS 文件中