如何在 HTML 文本下方添加虛線下划線
[英]How to Add a Dotted Underline Beneath HTML Text
問題描述
如何給 html 文本加下划線，以便文本下方的線是虛線而不是標准下划線？ 最好，我想在不使用單獨的 CSS 文件的情況下執行此操作。 我是html的新手。
11 個解決方案
解決方案1
145 已采納 2013-03-06 16:24:46
沒有 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>
解決方案2
54 2016-07-13 07:53:07
使用以下 CSS 代碼...
text-decoration:underline;
text-decoration-style: dotted;
解決方案3
16 2013-03-06 16:25:55
如果沒有 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>
解決方案4
11 2016-07-11 14:14:27
HTML5 元素可以提供虛線下划線，因此下面的文本將具有虛線而不是常規下划線。 當用戶將光標懸停在元素上時，title 屬性會為用戶創建一個工具提示：
注意：在 Firefox 和 Opera 中默認顯示虛線邊框/下划線，但 IE8、Safari 和 Chrome 需要一行 CSS：
<abbr title="Hyper Text Markup Language">HTML</abbr>
解決方案5
5 2021-10-02 01:23:33
您可以使用text-decoration屬性：
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-line: underline;
text-decoration-thickness: 1px;
解決方案6
4 2015-12-26 06:54:30
重新格式化@epascarello的答案：
u.dotted { border-bottom: 1px dashed #999; text-decoration: none; }
<!DOCTYPE html> <u class="dotted">I like cheese</u>
解決方案7
4 2018-10-09 10:12:40
如果內容超過 1 行，添加底部邊框將無濟於事。 在這種情況下，你將不得不使用，
text-decoration: underline;
text-decoration-style: dotted;
如果你想在文本和行之間有更多的呼吸空間，只需使用，
text-underline-position: under;
解決方案8
1 2020-02-05 00:12:14
你可以試試這個方法：
<h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>
請注意，沒有text-underline-position: under; 你仍然會有一個虛線下划線，但這個屬性會給它更多的喘息空間。
這是假設您想使用內聯樣式將所有內容嵌入 HTML 文件中，而不是使用單獨的 CSS 文件或標簽。
解決方案9
1 2021-07-07 14:20:45
也許我有點晚了，但只需使用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;
}
解決方案10
0 2020-01-24 07:16:24
您可以使用帶dotted選項的邊框底部。
border-bottom: 1px dotted #807f80;
解決方案11
-2 2015-04-30 09:03:55
沒有 CSS 並非不可能。 例如作為列表項：
<li style="border-bottom: 1px dashed"><!--content --></li>
使用Microsoft Word創建HTML時，如何刪除超鏈接下方的下划線？
[英]How do you remove the underline beneath a hyperlink when using Microsoft Word to create HTML?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.