在 HTML 中呈现制表符 [重复]答案

【问题标题】：Render tab characters in HTML [duplicate]在 HTML 中呈现制表符 [重复]
【发布时间】：2011-02-09 13:39:54
【问题描述】：

我必须向网页呈现一些文本。文本来自我无法控制的来源，并使用换行符和制表符格式化。

新行(\n) 可以替换为br 标签，但是保留标签呢？简单的搜索表明没有办法直接在 HTML 中呈现制表符。

【问题讨论】：

我不认为这是重复的，因为另一个问题是关于使选项卡保持在 HTML 文件中的选项卡，而这个问题是关于使选项卡按预期显示。
这应该作为stackoverflow.com/questions/1571648/…的副本关闭
@bummi 、 Undo 、 Crisp 、 TGMCians 和 Digigizmo 都错误地将其标记为重复。为了所有其他需要解决有效问题的人的利益，请尝试：key:<pre style="display:inline;">&#9;</pre>value

标签： html

【解决方案1】：

为什么不将内容包装在 <pre> 标记中？这将处理\n 以及\t 字符。

【讨论】：

这破坏了我的其余布局非常糟糕
虽然我意识到最初的问题不是关于渲染源代码，但<pre> 的一个缺点是您无法使用语法突出显示来渲染代码。
一个有效的观察@rob，对我来说是正确的方向，谢谢。因此我建议只包装制表符，并更改为内联模式：key:<pre style="display:inline;">&#9;</pre>value<br />

【解决方案2】：

不间断空格的替代方法是 em 空格（&emsp; 或 &#x2003;）。如果这是一个优势，它通常会呈现为更长的空间。

【讨论】：

【解决方案3】：

一种快速而肮脏的方式

为了快速修复，您可以使用xmp 标签来阻止浏览器折叠空格。 xmp 标记包含应以未解释的方式呈现的文本（并以等宽字体）。

问题是xmp 标签自 HTML3.2 以来已被弃用，并且已从 HTML5 规范中完全删除。实际上，浏览器仍然支持xmp 标签，所以它们仍然有用，但在生产环境中不可用。

正确的方法

制表符用于制表数据。在 HTML 中将数据制成表格的正确方法是使用 table 标记。原始字符串中的每一行都转换为表格中的一行，而原始字符串中的每个制表符在表格中开始一个新的（左对齐）单元格。

假设你有这个（制表符对齐的）字符串开头：

Spam    1.99
Cheese  2.99

翻译成 HTML，该字符串如下所示：

<table>
    <tr> <td> Spam   </td> <td> 1.99 </td> </tr>
    <tr> <td> Cheese </td> <td> 2.99 </td> </tr>
</table>

注意：如果您将制表符对齐的字符串包裹在 xmp 标记中，并将 HTML 表格的样式设置为看起来像纯文本，则呈现的结果将是相同的。

【讨论】：

-1 这是一种显示表格数据的方法，但可能是也可能不是显示tab 的正确方法，这完全取决于上下文。因此，只有当 OP 要求提供显示表格数据的最佳指南时，您的回答才是正确的。但是，这方面的问题尚不清楚。
标签用于创建表格。这就是它的人生目的。 HTML 表格是选项卡的精确翻译。如果您将制表符用于其他任何事情，那么您做错了什么，或者缩进了代码，这有点像重载字符。如果您使用制表符进行缩进，您可以只转换为空格，但这不适用于正确使用制表符。桌子可以，因为这就是它们的设计目的。即使您的答案完全错误，无论问题是否有任何歧义，您似乎都在对您的否决票感到不满。
正确答案是预答案。对不起，但这是我的意见。继续前进
@CarlSmith 开箱即用的想法不错，但您断言“字符串中的制表符只是创建表”并不总是正确的。例如，如果您使用选项卡来呈现树结构，则使用表格会不必要地浪费大量空间。如果您尝试呈现程式化的代码，使用表格来呈现选项卡是一个糟糕的解决方案。如果你想用语法高亮来渲染代码，即使 xmp 和 pre 也会失败。
我们正在颠倒对方的观点。选项卡设计用于创建表格。它们用于缩进代码的事实是偶然的。这不是表格的错，它们不是最有效的方法。如果要缩进代码，则不需要表格；您可以使用空间组。

【解决方案4】：

如果您已经在替换换行符，为什么不对制表符做同样的事情...？

str_replace("\t", '&nbsp;&nbsp;&nbsp;&nbsp;', $text);

【讨论】：

-1 因为制表符不是四个空格？？
不能不同意这一点，但鉴于 HTML 不做标签，还有什么选择？
将输出包装在xmp 标签中。或者只是解析字符串并计算制表符在等宽字体中的空格数。
或许将其添加为答案？

【解决方案5】：

可以使用

&emsp;、&ensp;、&#8195;或&#8194;。

W3 对此只字未提...

The character entities &ensp; and &emsp; denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font.