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


当前回答

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

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

其他回答

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

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

我发现跳过pre标签并在div上使用空白:pre-wrap是一个更好的解决方案。

 <div style="white-space: pre-wrap;">content</div>

你可以:

pre { white-space: normal; }

要保持单行字体,但添加换行,或:

pre { overflow: auto; }

这将允许固定大小的水平滚动长行。

最简单地说,这迫使内容包装在一个pre标签内,而不中断单词。

pre {
    white-space: pre-wrap;
    word-break: keep-all
}

答案,从这个页面的CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    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+ */
}