如何在预标记中包装文本？-Java 学习之路

583

pre 标签对于HTML中的代码块和编写脚本时的调试输出非常有用，但是如何使文本自动换行而不是打印出一条长行呢？

13 回答

答案来自CSS中的this page：

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+ */
}

回复于 2024-05-19T21:00:34+08:00

0
这非常适合在 pre -tag中包装文本和维护空格：
```
pre{
    white-space: pre-wrap;
}
```
回复于 2024-05-19T21:00:34+08:00
4
我发现跳过pre标签并使用white-space：在div上预先包装是一个更好的解决方案 .
```
<div style="white-space: pre-wrap;">content</div>
```
回复于 2024-05-19T21:00:34+08:00
5
这就是我需要的 . 它保持单词不会破坏，但允许前区域的动态宽度 .
```
word-break: keep-all;
```
回复于 2024-05-19T21:00:34+08:00
16
我建议忘记pre，然后把它放在textarea中 .

你的缩进将保留，你的代码不会在路径或其他东西中被包装 .

如果要复制到剪贴板，也可以更轻松地在文本区域中选择文本范围 .

以下是一个php摘录，所以如果你不在PHP，那么你打包html特殊字符的方式会有所不同 .
```
<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>
```
有关如何在js中将文本复制到剪贴板的信息，请参阅：How do I copy to the clipboard in JavaScript? .

然而...

我只是检查了stackoverflow代码块，并用css包装在<pre>标签中的<code>标签中...
```
code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}
```
此外，stackoverflow代码块的内容是使用（我认为）http://code.google.com/p/google-code-prettify/突出显示的语法 .

它是一个很好的设置，但我现在正在与textareas .
回复于 2024-05-19T21:00:34+08:00
13
我结合了@richelectron和@ user1433454的答案 .
它工作得很好并保留了文本格式 .
```
<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>
```
回复于 2024-05-19T21:00:34+08:00
-3
你可以：
```
pre { white-space: normal; }
```
维护等宽字体但添加自动换行，或者：
```
pre { overflow: auto; }
```
这将允许固定大小与水平滚动长行 .
回复于 2024-05-19T21:00:34+08:00

837

试试这个

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+ */
        padding:0px;
        margin:0px
    }

回复于 2024-05-19T21:00:34+08:00

108
尝试使用
```
<pre style="white-space:normal;">.
```
或者更好地抛出CSS .
回复于 2024-05-19T21:00:34+08:00
8
最简洁的是，这会强制内容包装在“pre”标签内而不会破坏单词 . 干杯!
```
pre {
  white-space: pre-wrap;
  word-break: keep-all
}
```
查看实例here .
回复于 2024-05-19T21:00:34+08:00

以下帮助我：

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

谢谢

回复于 2024-05-19T21:00:34+08:00

12
The Best Cross Browser Way worked for me to get line breaks and shows exact code or text: （chrome，internet explorer，Firefox）

CSS：
```
xmp{ white-space:pre-wrap; word-wrap:break-word; }
```
HTML：
```
<xmp> your text or code </xmp>
```
回复于 2024-05-19T21:00:34+08:00
47

<pre> -Element代表"pre-formatted-text"，旨在保持文本（或其他）在其标记之间的格式 . 因此，它实际上并不打算在 <pre> -Tag中自动换行或换行

元素中的文本以固定宽度字体（通常为Courier）显示，并保留空格和换行符 .

source: w3schools.com，强调自己做的 .

回复于 2024-05-19T21:00:34+08:00

如何在预标记中包装文本？

13 回答

相关问题