Question

我要在html页面上显示一堆文字。文本看起来像这样：

+-001 This is a Line            00:12:04
  002 ----------------------------------
- 003 Everthing looks good so far ------

文字是“预先格式化的”，包含很多白色空格和短划线，每一行都有相同的长度（所有字符都有相同的宽度）。

有没有办法在html中显示文字而不会丢失格式？

Answer 1

将文字包裹在<pre>标记内。

JSFiddle

<pre>
+-001 This is a Line            00:12:04
  002 ----------------------------------
- 003 Everthing looks good so far ------ 
</pre>

Answer 2

HTML方式是使用专为此类用途设计的pre element，但请注意

为了确保格式安全，请将<pre>标记放在第一行的开头，将</pre>标记放在最后一行的末尾。否则，某些浏览器的行为可能就像在元素的开头或末尾有一个空行。
您仍然需要在内容中转义字符<和&的出现（在某些情况下不需要这样做，但最简单的是忽略它。

示例（我添加了包含表达式1 + 1＆lt; 3的行）：

<pre>+-001 This is a Line            00:12:04
  002 ----------------------------------
- 003 Everthing looks good so far ------
- 004 Simple as 1 + 1 &lt; 3         ------</pre>

您可以使用xmp代替<来避免转义&和pre，但xmp已被宣布为已弃用，已废弃，等等（但它在实践中很有效。）

<xmp>+-001 This is a Line            00:12:04
  002 ----------------------------------
- 003 Everthing looks good so far ------
- 004 Simple as 1 + 1 < 3         ------</xmp>

Answer 3

尝试将内容包装为PRE标记。 http://www.w3schools.com/tags/tag_pre.asp

Html显示格式化文本

3 个答案: