防止空格与单词一起换行答案

【问题标题】：Prevent white space from wrapping together with word防止空格与单词一起换行
【发布时间】：2013-07-19 10:26:10
【问题描述】：

描述我的问题的最简单方法是举例：http://jsfiddle.net/trSwG/1/

第一段很棒，它完全按照我想要的方式显示。无论第一行添加了多少空白，它都会被截断并且不会换行到第二行。

第二段是问题所在。 “case”一词前面的空格不应包含在此行中，我希望它保留在上面的行中，并像第一段中的那样。

第三段也可以，这只是为了表明我希望保留空白。还值得注意的是，我不希望单词被破坏（word-break: break-all）。

我在下面附上了一个屏幕截图，以防它在您的浏览器上呈现不同。我正在使用 Chrome 28.0.1500.72 m：

您会注意到我使用lettering.js plugin 将每个字符包装在一个跨度内，这是我们正在开发的功能所必需的。

到目前为止我学到了什么：

如果您删除刻字呼叫，似乎跨度会导致问题：

//$('p').lettering();

一切都在我需要的时候工作。不知何故，跨度的作用与普通文本不同。

更新： html 本身也不能手动编辑。它由 Flash 内容管理工具创建，并与其他属性一起保存为 XML。有数千个这样的 xml 文档。服务器有机会在将 XML 作为 HTML 发送到前端之前对其进行处理，因此任何涉及更改 html 的解决方案都需要编写脚本。

【问题讨论】：

那你想要什么？仅对第一行禁用文本换行？
在这个简化的例子中，主要是我不希望第二段中的单词“case”缩进一个空格。在我看来，空格字符应该留在第一行，就像第一段一样。一个更好的例子可能是：jsfiddle.net/trSwG/3。请注意，文本没有整齐地向左对齐。
空白怎么办：前行； ?
不幸的是，前行不保留空白。它打破了第 3 段。
我已经编辑了我的答案。您可以为所有段落申请 white-space: pre-line; 样式，而对于最后一个 white-space: pre-wrap; jsfiddle.net/achudars/trSwG/4

【解决方案1】：

编辑

简单地在 CSS 中怎么样：

p {
    width: 160px;
    white-space: pre-line;    
    font-family: Arial;
    font-size: 13px;
}
p:last-child {
    white-space: pre-wrap;    
}

【讨论】：

很抱歉没有提及如此重要的事情 - 手动编辑 html 不是一种选择。我已经更新了关于为什么的问题。
那么你可以使用 JavaScript 的 replace() 方法，用换行符替换第一句后的空格
这个解决方案对于这个单一的案例来说太具体了。段落可以按任何顺序排列。这是一个更复杂的示例：jsfiddle.net/trSwG/9。我希望它看起来像这样：jsfiddle.net/trSwG/8（注释掉 lettering.js）。
它们在我的 Google Chrome 上看起来一模一样：Imgur [与 P 相同，与 PRE 相同] 这是特定浏览器的问题吗？
有趣。您的 Chrome 版本是多少？

【解决方案2】：

它已在当前的 beta 版本 29 中得到修复，它被推送到公共构建只是时间问题。

【讨论】：