协慌网

登录 贡献 社区

如何在预标签中包装文字?

pre标记对于 HTML 中的代码块以及编写脚本时调试输出非常有用,但是如何使文本自动换行而不是打印长行呢?

答案

答案,来自此页面的 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+ */
}

pre标签内包装文本和保持空白非常有用:

pre {
    white-space: pre-wrap;
}

我发现跳过 pre 标签并使用空格:在 div 上进行预包装是更好的解决方案。

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