在<pre>标签中如何实现换行？

Question

在<pre>标签中如何实现换行？

html

66

我正在创建基于用户在文本区域中输入的评论字段。但是当我使用<pre>标签时，我无法使其在评论视图中正确换行。

如果有更好的方法，我并不固执于使用<pre>标签。我选择使用它的唯一原因是为了保留用户添加的换行和空格。

我注意到<pre>中有一个名为“width”的属性，但W3将其注释为已弃用，并且仅在若干字符后才会断行，这也不理想（在IE中根本不起作用）。

有什么建议吗？

- peirix

4个回答

20

跨浏览器最佳实现方式（chrome、Internet Explorer、Firefox）。它已经为我工作，可以获得换行符并显示精确的文本：

CSS：

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

HTML:

<xmp> your text or code </xmp>

- feacco

7

XMP标签已被弃用。详见https://dev59.com/t3VD5IYBdhLWcg3wWaVh。根据https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp，"尽管它在某些浏览器中仍可使用，但其使用已不被鼓励，因为它可能随时会被移除。请尽量避免使用它。" - computingfreak

谢谢 - xmp 在生成长串连续项目的一次性任务中表现完美，无论浏览器渲染如何，pre 都会导致从生成的输出中剪切和粘贴时出现严重问题。 - SexxLuthor

6

您可以使用overflow:auto来显示像SO上这样的pre元素：

<pre style="overflow:auto">Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.</pre>

但是，pre元素仅适用于预格式化文本，如源代码或纯文本文件。因此，您最好添加HTML换行符（br元素）或甚至段落（p元素）。

- Gumbo

使用 p 标签的问题在于我会丢失用户可能添加的格式，而且溢出滚动很丑:p - peirix

2

您可能仍希望有溢出，针对那些输入让布局混乱且不易换行的长单词。 - bobince

0

文件名：whitespace.prewrap.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lorem Ipsum. Cicero.</title>
    <style>
        pre {
            white-space: pre-wrap; /* Allows for wrapping while preserving whitespace */
        }
    </style>    
</head>
<body>
    <h1>Lorem Ipsum. Cicero.</h1>
    
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum. Donec in efficitur leo. Maecenas non diam cursus, imperdiet massa eget, pellentesque ipsum. Curabitur ut nibh et quam accumsan tempus at in urna. Sed at eleifend purus.

</pre>
</body>
</html>

- quine9997

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bobince · Accepted Answer

通常的方法是将输入中的单个换行符转换为“<br />”。（双换行符通常会引入新的“<p>”元素。）但这并不包括多个空格字符; 如果需要保留它们，可以将每个两个空格的序列替换为一个空格和一个不间断空格（' '、' \xA0' 或 '  ' 作为字符参考）。

有一种 CSS 的方法可以保留字面意义上的换行符和空格，但在行长度太短时仍然进行换行：

white-space: pre-wrap;

然而，在CSS 2.1和CSS 3中，该属性值在其原始名称下不被所有浏览器支持。 Webkit（Safari，Chrome）会自动识别它；要使其在其他流行浏览器上工作，您需要添加以下代码：

white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;

'word-wrap' 是针对 IE 的，因为它总是有自己的做事方式。