如何避免 HTML 中的孤立动态文本

Question

我有一个固定宽度 HTML 页面，其中注入了一些动态 copy/text。应该允许文本换行，但不能产生孤儿

例如

Hi [first name], would you like to play a game?

问题是因为 [first name] 是动态的并且可以是任意长度，我似乎无法避免有时有一个孤儿

例如

Hi Guy-with-really-long-name, would you like to play a

game?

我不能使用 css“white-space: nowrap;”，因为它应该被允许换行，只是不能与孤儿一起使用。

我也想要一个适用于 HTML 电子邮件的解决方案。

有什么想法吗？

Answer 1

只需为最后（例如四个）单词设置 white-space: nowrap

Hi Guy-with-really-long-name, would you like 
<span style="white-space: nowrap">to play a game?</span>