pre标签对于HTML中的代码块和在编写脚本时调试输出非常有用,但是我如何使文本换行而不是打印出一行呢?


当前回答

<pre>做它的工作,但对于代码有<code>标签。

其他回答

以下几点帮助了我:

pre {
    white-space: normal;
    word-wrap: break-word;
}

谢谢

使用空白:预换行和供应商前缀,用于预压纸内的自动断行。

不要使用word-wrap: break-word,因为这只是把一个单词分成两半,这可能是你不想要的。

如果你使用prism或任何代码格式化库,那么你将需要修改展位前和代码标签如下:

pre {
    overflow-x: auto !important;
    white-space: pre-wrap !important;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap !important;      /* Opera 4-6 */
    white-space: -o-pre-wrap !important;    /* Opera 7 */
    word-wrap: break-word !important;       /* Internet Explorer 5.5+ */
}

code{
    white-space: normal !important;
}

<pre>-Element代表“预格式化文本”,用于在其标记之间保持文本(或其他内容)的格式。因此,在<pre>-Tag中实际上不打算自动换行或换行

元素中的文本以固定宽度的字体(通常是Courier)显示,并且保留空格和换行符。

来源:w3schools.com,强调由我自己制作。

这是你需要在pre标签中包装文本:

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}