html - 防止空格与单词换行

Question

描述我的问题的最简单方法是举例: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 的解决方案都需要编写脚本。

Answer 1

编辑

简单地在 CSS 中怎么样:

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