使“Pre”文本换行 | CSS-Tricks

<pre> 标签中的文本默认情况下不会换行。例如，请看下面的代码片段！如果这会导致布局问题，一个解决方案是为 pre 块设置 overflow 属性来隐藏多余部分或使其滚动。另一个解决方案是使其换行。

/* Browser specific (not valid) styles to make preformatted text wrap */		

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

Chad Ostrowski

# 2010 年 1 月 21 日

那么，o-pre-wrap 在 Opera 8、9 和 10 中也能正常工作吗？

Webkit 浏览器怎么样？（我真诚地希望他们支持 CSS3 声明本身。）

经过我所有的 Google 搜索，这个解决方案是唯一一个出现的地方。它似乎已经过时了……

aaaaa

# 2010 年 5 月 26 日

在 Opera 10 和 IE8 中不起作用

Kzqai

# 2012 年 7 月 12 日

本文的演示链接似乎已损坏。

chathu

# 2012 年 9 月 16 日

哇，它确实有效。非常感谢。我只添加了以下两行代码，但它就起作用了。可以吗？

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

Larry Levenson

评论的永久链接# 2013 年 10 月 15 日

我使用了这两行相同的代码，Chathu。效果神奇，对吧！我用它来自动换行提交按钮的文本。很棒的解决方案！感谢，Chris！

Ashok

# 2013 年 3 月 11 日

请给我一些示例网站。

Jeff Lambert

# 2013 年 3 月 22 日

太棒了！我在构建一个新的响应式主题时快疯了。我一直弄不明白为什么内容在某些页面上没有像在其他页面上那样压缩。最后我发现是我包含的 <pre><code> 包裹内容导致了问题。我想我需要以某种方式输入内容来防止它扩展，或者使用 overflow hidden，但你的解决方案非常有效！感谢分享。

jayesh

# 2013 年 4 月 4 日

谢谢

Lore

# 2013 年 4 月 13 日

这个有效，但 Firefox 在 PRE 上仍然有问题，因为我的盒子模型没有被继承。在 PRE 块中使用填充会导致页面水平滚动，即使使用 overflow hidden。以下是对它的修复

pre, code {
 padding:30px;
 box-sizing:border-box;
 -moz-box-sizing:border-box;
 webkit-box-sizing:border-box;
 display:block; 
 white-space: pre-wrap;  
 white-space: -moz-pre-wrap; 
 white-space: -pre-wrap; 
 white-space: -o-pre-wrap; 
 word-wrap: break-word; 
 width:100%; overflow-x:auto;
}

Lore

评论的永久链接# 2013 年 4 月 13 日
PS – 如果仍然有问题，尝试将填充替换成类似的东西
```
    border: 12px solid transparent;
```
Osama

评论的永久链接# 2014 年 4 月 15 日

您的 Webkit 代码没有 (( – ))，它应该是

-webkit- 而不是 webkit

并且请先添加 Webkit，然后是 Mozilla，最后是其他代码
-webkit-
-moz-
没有前缀的属性

soundar

# 2016 年 3 月 4 日

Lore，

      Thanks for your helping, i solved my problem by using pre-wrap;

Marco

# 2013 年 5 月 17 日

我认为这个更可靠

pre {
word-break: break-all; /* webkit /
word-wrap: break-word;
white-space: pre;
white-space: -moz-pre-wrap; / fennec /
white-space: pre-wrap;
white-space: pre\9; / IE7+ */
}

演示 http://jsbin.com/bulletproof-responsive-pre/2/edit

Kelly

评论的永久链接# 2013 年 7 月 5 日

^ +1

我一直在努力让 pre 换行，并且不破坏响应式网站的宽度。Marco 的解决方案有效。
Tim

评论的永久链接# 2013 年 11 月 14 日

感谢，Marco！效果非常好！
Mike Kelly

评论的永久链接# 2015 年 6 月 20 日

问题是它不会像旁边的真实代码那样在单词或标点符号处换行，而是在单个字母处换行。有什么解决方法吗？谢谢！
Sabari

评论的永久链接# 2015 年 7 月 5 日

太棒了，Marco！我一直在努力，终于你的解决方案对我有用

Tabitha

# 2013 年 7 月 10 日

感谢你。我从昨天开始就一直撞墙了。今天真是太棒了：）。你知道，小事很重要……

rishabh jain

# 2013 年 9 月 6 日

有人可以帮我吗？我有一些 HTML 和 Java 代码，我想将它们存储到数据库中，这样我就可以进一步使用它们来显示所需的文件，我应该使用什么格式将它们发送到数据库？

Sergio Vitali

# 2013 年 10 月 1 日

嗨，这个解决方案在 Internet Explorer 10 中不起作用。

Nenad Marjanovic

# 2013 年 11 月 30 日

嗨，

这对我的博客来说是一个很好的解决方案，因为我写了很多终端 Linux 命令，并且我使用 pre 使它们看起来更好。

谢谢！

Sudheep Divakar

# 2013 年 12 月 30 日

感谢你，Marco。它起作用了。

Christina

# 2014 年 1 月 6 日

可以使其在单词而不是字符处换行吗？

Christina

评论的永久链接# 2014 年 1 月 6 日

不用了，我已经弄明白了我的问题。我试图在表单按钮上使用它，并且在字符换行而不是单词换行方面遇到了问题。我使用了“white-space: normal !important;”，它有效。
Mike Kelly

评论的永久链接# 2015 年 6 月 20 日

我也有同样的问题。Christina，我在普通代码上尝试了你的解决方案。它仍然在字符处换行……

Jay

# 2014 年 3 月 3 日

我真的不知道没有这个很棒的网站我会怎么做！Chris，感谢你分享你如此丰富的知识。我刚开始学习 Web 开发，这是我遇到任何问题时都会去访问的网站（几乎是我的最后一站，因为这里总能找到答案！）。

谢谢。
Jay

Sriniwas

# 2014 年 3 月 8 日

该代码在 Opera 10 中不起作用，有什么解决方法吗？

Philip Ashlock

# 2014 年 5 月 16 日

为了防止单词在从 white-space: pre-wrap; 换行时被分割，您还可以使用

   word-break: keep-all;

Italiatina

评论的永久链接# 2014 年 6 月 15 日

^+1

word-break: keep-all;

这个非常有效，谢谢！

koolx

# 2014 年 8 月 12 日

我使用的是 Opera 12 版本。我将网页设置设置为“适合宽度”。但我需要在某些网页上关闭此功能。我安装了 Stylish。我可以在特定网页上使用什么代码来忽略“适合宽度”？

Aidan

# 2014 年 8 月 22 日

Marco.. 你真是个天才！

Annali

# 2014 年 9 月 25 日

您好，

感谢您，它非常有效，但是，有没有办法设置 pre 标签的宽度（带有文字换行）以使其在表格或 div 中自动调整大小？

我一直在努力解决这个问题好几天了，任何帮助或建议将不胜感激

谢谢

Gabrielle

# 2015 年 7 月 7 日

嗨，我正在测试 Crayon 来突出显示我的 pre 代码，
我怎样才能强制插件使用：word-break: keep-all;
，并防止单词被分割？
感谢您的建议，最好的祝福，Sparky's :)

dwhyte

# 2015 年 8 月 21 日

谢谢，这真是个救星

Vlad Gurdiga

# 2016 年 6 月 9 日

谢谢！非常方便！ 8-)

isakhejnesen

# 2016 年 8 月 21 日

非常棒，正是我要找的。谢谢 :)

Rohith Vaddavalli

# 2017 年 3 月 29 日

效果非常好。
但是 word-wrap:break-word -> 不够吗
white-space:pre-wrap 有什么用？
谢谢！

twobob

# 2017 年 6 月 25 日

word-break: keep-all;

如果将此设置为 word-break: break-all; 则所有其他

white-space: blah 被忽略。也许值得注意

Archi

评论永久链接# 2018 年 8 月 6 日

谢谢。这改变了结果！

Agung Nugroho Daryannto

# 2017 年 11 月 22 日

谢谢，这篇文章确实帮助我找到了解决方案

PeteLong

# 2018 年 9 月 19 日

在 Firefox 或 Opera 中仍然不起作用吗？

Kevin Scharnhorst

# 2020 年 5 月 13 日

我很想看到使用 pre-wrap 的方法，我可以附加行延续字符。

Jani Janegirl S.

# 2022 年 12 月 19 日

太有帮助了，为什么？因为人们将代码放在页面上的 pre 标签中，并且他们更长的代码行根本无法显示。

所以有了这个，我现在可以右键点击代码，选择“检查”，然后在 PRE 标签中添加两行 CSS 样式，并使代码很好地（尽管并不总是漂亮）换行，最重要的是可见！感谢现代桌面浏览器的功能 \o/

评论

发表评论 取消回复

发表评论取消回复