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

95

您如何在html文本下划线，以使文本下面的线是虚线而不是标准下划线？最好是，我希望不使用单独的CSS文件来执行此操作。我是html的新手。

html underline

— 帕拉
source

13

为什么为什么不能使用CSS？也许将页面创建为一张图像，并使用mspaint添加行？

— epascarello 2013年

我认为没有CSS就无法实现

— Cfreak 2013年

您必须使用css，但是可以使用背景图像来完成，边框底部是最好的方法

— Kingdomcreation 2013年

4

帅哥我认为他说的是“不使用单独的CSS文件”，而不是“不使用CSS”。敬拜新手。

— Stefan Reich

137

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

— 阿尔弗雷德·邢
source

在您的<head>元素中，添加<style>标签（我已经编辑了答案）

— Alfred Xing

2

你也可以尝试dotted，而不是dashed

— 布赖恩·伯恩斯

好的解决方案，这是可能的。不要让我为此编写代码js；）

— Ahmet CanGüven16年

这是多行文本支持的答案stackoverflow.com/a/4365458/1078641

— electroid

30

使用以下CSS代码...

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

— 沙克尔·艾哈迈德（Shakeel Ahmed）
source

3

这应该是公认的答案。在盒子模型之后，使用点划线border将放置padding在文本外部，从而与文本保持距离。

— Ryan Walker

2

语法很简短：text-decoration: underline #000 dotted;第一个属性是line，第二个属性是color，第三个属性是style。

— Sos Sargsyan

感谢Sos的改进

— Shakeel Ahmed

15

如果没有CSS，则基本上只能使用image标签。基本上制作文本图像并添加下划线。这基本上意味着您的页面对屏幕阅读器无用。

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

— epascarello
source

9

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

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

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

— 法蒂玛·瓦希德（Fatima Waheed）
source

这是正确的答案。简短且无CSS。谢谢。

— Saeed Ahadian

4

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

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

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

text-underline-position: under;

— 达珊娜·古纳瓦达娜（Darshana Gunawardana）
source

3

重新格式化@epascarello的答案：

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

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

展开摘要

— 分析技术
source

0

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

border-bottom: 1px dotted #807f80;

— 尼尔
source

0

您可以尝试以下方法：

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

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

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

— 蒙娜·贾拉（Mona Jalal）
source

-2

没有CSS并非不可能。例如作为列表项：

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

— 达文顿三世
source

6

没有CSS是不可能的。该style属性只是将CSS属性直接应用于元素的一种方式。有关样式属性，请参见MDN文档。

— mirichan

以这种方式添加CSS是有效考虑html样式的一种方式。当然，您可以争辩说没有这种事情，但是对于一种易于描述的方法来说，这是一种可能的解决方案。

— Davington III

虽然它仍然是CSS，但是真正的优先选择是没有单独的文件。解决该限制问题的最佳方法是<style>。内联样式应谨慎使用。

— mirichan 2015年

嗯，在我创建该帖子时是因为我必须使用内联样式。似乎值得其他人注意的可能性，以防万一他们可能没有想到，这对战争与和平而言确实不是一个合适的话题……他们大概找到了他们所需要的，我们的建议对那些以及其他可能的人需要它们，当我下班后，我没有考虑到有人指出该建议已经很明显了，而这并不是“您必须以这种方式必须这样做”，所以是的，请给我一个寒意丸：)

— 戴文顿III

1

你误会我的意图。我正在就所问的问题进行技术观察。我无意打扰您，对此我深表歉意。

— mirichan 2015年