如何在 HTML 中显示一些带有空格的文本，带有双空格字符答案

【问题标题】：How can I display some text with spaces in HTML, with double space characters如何在 HTML 中显示一些带有空格的文本，带有双空格字符
【发布时间】：2018-02-23 21:06:48
【问题描述】：

我需要将以下内容显示为 HTML 文本（逐字）：

T H I S  I S  A  T E X T

如你所见：

所有字符之间都有一个空格
空格字符已加倍
我想把它放在<a> 标签内

我试过的是：

<a href="#">T H I S  I S  A  T E X T</a>

但是 html 将几个空格字符压缩为一个。

如何强制使用双空格？

【问题讨论】：

我今天学到了新东西stackoverflow.com/questions/433493/…
目标是在每个打印字符之间实际有一个空格字符还是只是分散字母？
使用 &nbsp 并不像我猜的那么好。你可以使用字母间距

标签： html

【解决方案1】：

你可以通过 CSS 做到这一点

letter-spacing: 5px;

【讨论】：

【解决方案2】：

比不中断的 &nbsp 更好的解决方案是 &emsp，它是双空格（在句尾有用），或 &ensp 是单空格。

【讨论】：

【解决方案3】：

字母间距

定义和用法

letter-spacing 属性增加或减少文本中字符之间的间距。

 <!DOCTYPE html>
    <html>
    <head>
    <style>
    a {letter-spacing:5px;}

    </style>
    </head>

    <body>
    <a href="#">THIS IS A TEXT</a>
    </body>
    </html>

WORKING DEMO

【讨论】：

【解决方案4】：

您可以使用 HTML pre 标签并为其设置样式，例如

<a href="#"><pre>T H I S  I S  A  T E X T</pre></a>

pre 标签在 HTML 中保留任意数量的空格。您还可以将其样式设置为看起来像常规文本，例如

<style>
    pre {
         background: transparent;
         display: inline;
         border: none;
         padding: 0;
    }
</style>

【讨论】：

【解决方案5】：

您想要一个不间断空格字符$nbsp;...它是可用的HTML 实体之一 ;-)

【讨论】：

【解决方案6】：

在你的字母之间使用&nbsp;，如下所示： T&nbsp;H&nbsp;I&nbsp;S&nbsp;&nbsp;I&nbsp;S&nbsp;&nbsp;A&nbsp;&nbsp;A&nbsp;&nbsp;T&nbsp;E&nbsp;X&nbsp;T

【讨论】：