Html 显示格式化文本

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18329505/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 12:21:04  来源:igfitidea点击:

Html display formatted text

htmltextformat

提问by musium

I've to display a bunch of text on an html page. The text looks something like this:

我必须在 html 页面上显示一堆文本。文本看起来像这样:

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

The text is “pre-formatted” and contains a lot of whit spaces and dashes and every line has the same length (all chars have the same width).

文本是“预先格式化的”,包含大量的空格和破折号,每行的长度相同(所有字符的宽度相同)。

Is there a way to display the text in html without losing the format?

有没有办法在不丢失格式的情况下以html显示文本?

回答by Shiju K Babu

Wrap your text inside the <pre>tag.

将您的文本包裹在<pre>标签内。

JSFiddle

JSFiddle

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

回答by Jukka K. Korpela

The HTML way is to use the preelement, which has been designed for such usage, but beware that

HTML 的方式是使用preelement,它是为这种用法而设计的,但要注意

  • To be on the safe side in formatting, put the <pre>tag right at the start of the first line and the </pre>tag right at the end of the last line. Otherwise some browsers may behave as if there were an empty line at the start or at the end of the element.
  • You still need to escape occurrences of the characters <and &in the content (there are some cases where this is not needed, but it is simplest to ignore that.
  • 为了安全起见,将<pre>标签放在第一行的开头,将</pre>标签放在最后一行的末尾。否则,某些浏览器可能会表现得好像在元素的开头或结尾有一个空行。
  • 您仍然需要对字符<&内容中出现的字符进行转义(在某些情况下不需要这样做,但最简单的方法是忽略它。

Example (where I have added a line containing the expression 1 + 1 < 3):

示例(我添加了一行包含表达式 1 + 1 < 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>

You can avoid escaping <and &by using xmpinstead of pre, but xmphas been declared deprecated, obsolete, and whatever (but it works nicely in practice).

您可以避免转义<&使用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>

回答by mehany

Try wrapping the content a PRE tag. http://www.w3schools.com/tags/tag_pre.asp

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