像最新的 Safari 一样使用空格换行文本：pre

Posted 2023-05-07

【中文标题】像最新的 Safari 一样使用空格换行文本：pre

【英文标题】：Wrap Text like the latest Safari does with white-space: pre

【发布时间】：2012-07-26 17:23:17

【问题描述】：

当white-space: pre; 应用于<div>s 或<textarea>s 时，Safari 可以很好地包装文本，如下所示。

<textarea style="width:300px; white-space:pre; word-wrap:break-word;"> text. dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</textarea>

当一个单词到达文本区域的max-width 时，整个单词不会像您只使用word-wrap: break-word; 那样向下移动一行。相反，它在max-width 处拆分单词并从左下角的换行符继续。我希望能够在所有主流浏览器中复制它，但如果太麻烦的话，我会满足于只使用 Firefox 和 IE。

任何关于如何实现这一目标的想法/建议将不胜感激。

【问题讨论】：

你能贴一张 safari 不同之处的截图吗？

img15.imageshack.us/img15/2012/firefoxva.pngimg193.imageshack.us/img193/7020/safarik.png

@Smith 链接失效了

【参考方案1】：

使用overflow-wrap or word-wrap。它们是同义词，但根据我的经验，word-wrap 适用于大多数浏览器：

textarea 
    word-wrap: break-word;
    overflow-wrap: break-word;

这将插入硬中断。

【讨论】：

这里更精确地了解word-wrap 和overflow-wrap 之间的差异：***.com/a/17259958/2477545

【参考方案2】：

这对我有用

white-space: normal;
word-break: break-word;

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。