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

Posted 2023-02-23

技术标签:

【中文标题】如何在 HTML 文本下添加虚线下划线【英文标题】：How to Add a Dotted Underline Beneath HTML Text 【发布时间】：2013-02-21 13:17:33 【问题描述】：

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

【问题讨论】：

为什么不能使用 CSS？也许将页面创建为一个图像并使用 mspaint 添加行？我不认为没有 CSS 可以做到你必须使用css，但可以使用背景图片，边框底部是最好的方法伙计们。我认为他说的是“不使用单独的 CSS 文件”，而不是“不使用 CSS”。崇拜新人。 【参考方案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>

【讨论】：

在你的<head> 元素中，添加一个<style> 标签（我已经编辑了我的答案）你也可以试试dotted而不是dashed 不错的解决方案，这是可能的。不要让我为它编写 js 代码 ;) 这是支持多行文本的答案***.com/a/4365458/1078641【参考方案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>

【讨论】：

【参考方案3】：

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

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

【讨论】：

没有 CSS 是不可能的。 style 属性只是将 CSS 属性直接应用于元素的一种方式。请参阅样式属性上的MDN docs。以这种方式添加 CSS 是一种有效思考 html 样式的方法。当然，您可以争辩说没有这样的事情，但对于一种易于描述的方法，这是一个可能的解决方案。虽然它仍然是 CSS，但真正的偏好是没有单独的文件。解决该限制问题的最佳方法是<style>。内联样式应该非常谨慎地使用。好吧，在我创建那个帖子的时候，是因为我必须使用内联样式。似乎值得向其他人指出这种可能性，以防万一他们可能没有想到，这不是真正适合战争与和平的话题......他们大概找到了他们需要的东西，我们的建议是针对那些和任何其他可能的人需要它们，当我下班发帖时，我不会考虑有人指出该建议已经很明显的事情，而这是一个建议，而不是“你必须这样做”，所以是的，兄弟，吃点镇静药吧:)跨度> 你误会了我的意图。我正在对所提出的问题进行技术观察。我无意喊你出来，我很抱歉以这种方式出现。【参考方案4】：

@epascarello 重新格式化了答案：

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

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

【讨论】：

【参考方案5】：

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

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

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

【讨论】：

这是正确答案。简短且无 CSS。谢谢。对于 HTML5，这确实应该是公认的答案。这只能用于缩写。否则屏幕阅读器可能会做错事。【参考方案6】：

使用以下 CSS 代码...

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

【讨论】：

这应该是公认的答案。按照盒子模型，使用带点的border 将被放置在padding 之外，从而远离文本。有一个简短的语法：text-decoration: underline #000 dotted; 其中第一个属性是线条，第二个是颜色，第三个是样式。感谢 Sos 的改进【参考方案7】：

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

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

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

text-underline-position: under;

【讨论】：

【参考方案8】：

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

border-bottom: 1px dotted #807f80;

【讨论】：

【参考方案9】：

你可以试试这个方法：

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

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

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

【讨论】：

【参考方案10】：

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

内嵌 HTML

&lt;u style="text-decoration:underline dotted"&gt;I have a dotted underline&lt;/u&gt;

对于虚线下划线，使用text-decoration: underline dashed。

&lt;u style="text-decoration:underline dashed"&gt;I have a dashed underline&lt;/u&gt;

正如 Darshana Gunawardana 所说，您可以使用text-underline-position: under，在文本和行之间留出更多空间：

&lt;u style="text-decoration:underline dotted;text-underline-position:under"&gt;I have a dotted underline&lt;/u&gt;

在单独的 CSS 文件中

u 
  text-decoration: underline dotted;

【讨论】：

【参考方案11】：

您可以使用text-decoration 属性：

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

【讨论】：

以上是关于如何在 HTML 文本下添加虚线下划线的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Android XML 中为文本添加下划线？

如何从 Apple 键盘听写中删除 TextView 中的蓝色虚线建议下划线？

html中如何去掉超链接的下划线(html取消超链接下划线)

如何从文本图像中删除虚线带？

如何在 MFC C++ 中为文本添加下划线

html中怎么在分割线左边添加文字