自动换行而不破坏单词答案

【问题标题】：Word wrap without breaking words自动换行而不破坏单词
【发布时间】：2012-11-02 07:50:05
【问题描述】：

我一直在使用网络服务器发送 HTML 格式的电子邮件，到目前为止一切都很好（内容和所有显示都很好），除了自动换行。单行文本（用户输入）可以持续不断，并在流行的电子邮件 Web 客户端上生成水平滚动条。

所以我去做了一些研究。我实现了<div style="width: 100%; word-break: break-word;"></div>，它工作得非常好，除了它开始切断我的话。我想做的是让它们进入下一行，同时保留自动换行。

其他在线消息来源称<div> 标记确实会自动换行，但在网络客户端中它不能以这种方式工作。我猜这可能是由于一些幕后的 CSS，但我并没有真正去调查。

有人对我的问题有任何解决方案/建议吗？我不想做服务器端格式化；首先，我认为这很麻烦，其次，我认为不同的网络电子邮件客户端看起来会有所不同...谢谢！

【问题讨论】：

【解决方案1】：

这确实是阻止正常包装的幕后因素。我们确实需要看到幕后，或者至少在幕后才能分析情况，但在一个简单的情况下，添加这个 CSS（在 div 上）应该会有所帮助：

white-space: normal;

它是初始值，但可能被某些东西覆盖了。如果这没有帮助，请尝试

white-space: normal !important;

避免使用word-break: break-word，因为顾名思义，它确实会破坏文字。它适用于允许在任何地方休息的书写系统。

【讨论】：

其实我需要它是white-space: pre-line;，因为我需要保留用户的输入。我从来不知道有一个名为 white-space 的 CSS 属性，因为我用 &nbsp;s 替换了所有的空格...谢谢！

【解决方案2】：

尝试添加这个附加属性：

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

【讨论】：

你在网上有模特吗？
是我的代码让我失望了...我将所有空格转换为&nbsp;，它最终变成了一个完整的长字符串。删除它并应用 white-space: pre-line; 样式效果很好，谢谢！！