blocks|key|364448|text|没有CSS是不可能的。实际上，CSS标记只是使用浏览器内置的<u>将text-decoration:underline添加到文本中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|364449|下面是你可以做的：|364450|<html>
<head>


<style+type="text/css">
u+{++++
++++border-bottom:+1px+dotted+#000;
++++text-decoration:+none;
}
</style>
</head>

</html>|code-block|syntax|javascript|364451|entityMap^0|U|3|Y|P|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>It's impossible without CSS. In fact, the <code>&lt;u&gt;</code> tag is simply adding <code>text-decoration:underline</code> to the text with the browser's built-in CSS.</p>

<p>Here's what you can do:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;!-- Other head stuff here, like title or meta --&gt;

&lt;style type="text/css"&gt;
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;!-- Body, content here --&gt;
&lt;/html&gt;
</code></pre>


blocks|key|146289|text|使用以下CSS代码...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146290|text-decoration:underline;
text-decoration-style:+dotted;|code-block|syntax|javascript|146291|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use the following CSS codes...</p>

<pre><code>text-decoration:underline;
text-decoration-style: dotted;
</code></pre>


blocks|key|364535|text|如果内容超过1行，则添加底部边框将无济于事。在这种情况下，您必须使用，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|364536|text-decoration:+underline;
text-decoration-style:+dotted;|code-block|syntax|javascript|364537|如果您希望在文本和行之间有更多的喘息空间，只需使用|364538|text-underline-position:+under;|364539|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>If the content has more than 1 line, adding a bottom border won't help. In that case you'll have to use,</p>

<pre><code>text-decoration: underline;
text-decoration-style: dotted;
</code></pre>

<p>If you want more breathing space in between the text and the line, simply use,</p>

<pre><code>text-underline-position: under;
</code></pre>


blocks|key|364734|text|也许我来晚了一点，但只要使用text-decoration:+underline+dotted就可以了，它是一个可以在任何地方使用的CSS属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|364735|内联HTML|364736|​|364737|<u+style="text-decoration:underline+dotted">I+have+a+dotted+underline</u>|code-block|syntax|javascript|364738|364739|对于虚线下划线，请使用text-decoration:+underline+dashed。|364740|364741|<u+style="text-decoration:underline+dashed">I+have+a+dashed+underline</u>|364742|364743|正如Darshana+Gunawardana所说，你可以使用text-underline-position:+under，在文本和行间留出更多的空间：|364744|364745|<u+style="text-decoration:underline+dotted;text-underline-position:under">I+have+a+dotted+underline</u>|364746|364747|在单独的CSS文件中|364748|u+{
++text-decoration:+underline+dotted;
}|364749|entityMap|0|LINK|mutability|MUTABLE|url|https://drafts.csswg.org/css-text-decor/#underline-under^0|E|X|0|0|0|0|0|B|X|0|0|0|0|U|U|U|U|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1G|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1H|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|1J|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|R|3|I|5|6|7|1N|8|@]|D|@]|E|$]]|$1|S|3|T|5|L|7|1O|8|@]|D|@]|E|$M|N]]|$1|U|3|I|5|6|7|1P|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@$9|1T|A|1U|1|1V]]|E|$]]|$1|X|3|I|5|6|7|1W|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|L|7|1X|8|@]|D|@]|E|$M|N]]|$1|10|3|I|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|13|3|14|5|L|7|20|8|@]|D|@]|E|$M|N]]|$1|15|3|-4|5|6|7|21|8|@]|D|@]|E|$]]]|16|$17|$5|18|19|1A|E|$1B|1C]]]]

<p>Maybe I’m a bit late, but just use <code>text-decoration: underline dotted</code>,
it’s a single CSS property that you can use everywhere.</p>
<h3>Inline HTML</h3>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;u style="text-decoration:underline dotted"&gt;I have a dotted underline&lt;/u&gt;</code></pre>
</div>
</div>
</p>
<p>For a dashed underline, use <code>text-decoration: underline dashed</code>.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;u style="text-decoration:underline dashed"&gt;I have a dashed underline&lt;/u&gt;</code></pre>
</div>
</div>
</p>
<p>As said by Darshana Gunawardana, you can use <a href="https://drafts.csswg.org/css-text-decor/#underline-under" rel="nofollow noreferrer"><code>text-underline-position: under</code></a>, to have more space between the text and the line:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;u style="text-decoration:underline dotted;text-underline-position:under"&gt;I have a dotted underline&lt;/u&gt;</code></pre>
</div>
</div>
</p>
<h3>In a separate CSS file</h3>
<pre class="lang-css prettyprint-override"><code>u {
  text-decoration: underline dotted;
}
</code></pre>


blocks|key|146437|text|您可以尝试以下方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146438|<h2+style="text-decoration:+underline;+text-underline-position:+under;+text-decoration-style:+dotted">Hello+World!</h2>|code-block|syntax|javascript|146439|请注意，如果没有text-underline-position:+under;，您仍然会有一个虚线下划线，但是这个属性会给它更多的喘息空间。|offset|length|style|CODE|146440|这是假设您希望使用内联样式将所有内容嵌入到HTML文件中，而不是使用单独的CSS文件或标记。|146441|entityMap^0|0|0|8|V|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>You can try this method:</p>

<pre><code>&lt;h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted"&gt;Hello World!&lt;/h2&gt;
</code></pre>

<p>Please note that without <code>text-underline-position: under;</code> you still will have a dotted underline but this property will give it more breathing space.</p>

<p>This is assuming you want to embed everything inside an HTML file using inline styling and not to use a separate CSS file or  tag.</p>


blocks|key|364774|text|您可以使用text-decoration属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|364775|++++text-decoration:+underline;
++++text-decoration-style:+dotted;
++++text-decoration-line:+underline;
++++text-decoration-thickness:+1px;|code-block|syntax|javascript|364776|entityMap^0|5|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>You can make use of <code>text-decoration</code> properties:</p>
<pre class="lang-css prettyprint-override"><code>    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
</code></pre>


blocks|key|364583|text|您可以使用带有dotted选项的底部边框。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|364584|border-bottom:+1px+dotted+#807f80;|code-block|syntax|javascript|364585|entityMap^0|7|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>You can use border bottom with <code>dotted</code> option. </p>

<pre><code>border-bottom: 1px dotted #807f80;
</code></pre>


blocks|key|364472|text|没有CSS也不是不可能的。例如，作为列表项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|364473|<li+style="border-bottom:+1px+dashed"></li>|code-block|syntax|javascript|364474|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It's not impossible without CSS. For example as a list item:</p>

<pre><code>&lt;li style="border-bottom: 1px dashed"&gt;&lt;!--content --&gt;&lt;/li&gt;
</code></pre>


<p>How do you underline html text so that the line beneath the text is dotted rather than the standard underline? Preferably, I would like to do this without using a separate CSS file. I'm a novice at html.</p>


How to Add a Dotted Underline Beneath HTML Text

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

问如何在HTML文本下添加带点的下划线
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML文本下添加带点的下划线EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML文本下添加带点的下划线
EN