CSS / HTML5避免在诸如": - )"之类的东西上换行。

时间:2017-04-04 20:45:53

标签: css html5

我的字符串包含使用ascii字符的表情符号,例如我需要在网页上显示的:-)

当笑脸刚好在线的末尾时,它可能会在两条线之间分开。我不希望这种情况发生。我总是希望将笑脸显示为单数"字" (在这种情况下,整个笑脸将显示在第二行)。

有人可以建议一个解决方案吗?

编辑1& 2

正如我在评论中所提到的,这里的想法是标点符号的集合不一定被认为是一个单词......而这实际上是我面临的问题。所以,如果我有"评论"在我的行尾,这个词不会被拆分,但如果你有&#34 ;;。!,;:"那就行了。

此外,您指出的答案并未建议我使用的解决方案word-break: keep=all。因此,我相信这是互补和不同的。

3 个答案:

答案 0 :(得分:2)

您实际上可能需要:word-wrap: break-word

答案 1 :(得分:2)

您可以尝试使用white-space:nowrap https://www.w3schools.com/cssref/pr_text_white-space.asp

其他替代方案,例如此处所述的表格的旧版本Attribute 'nowrap' is considered outdated. A newer construct is recommended. What is it?

答案 2 :(得分:1)

一个简单的white-space: nowrap应该做的工作。

用一个类.nowrap将你的笑脸包裹在一个范围内,并将该属性声明为该类。