Post #210

网页上如何处理长单词排版，以及环绕浮动体。 图 1：Chrome 和 Safari；图 2：Firefox。只有第 3 行第 2 列有区别，Firefox 认为 overflow-wrap 的意思是“不打断就一定会 overflow”时才打断，Chrome 和 Safari 认为“不打断就要撞上浮动体了”就可以打断。 word-break: break-all 太丑了。我之前基本都在用 overflow-wrap: anywhere，但 Firefox 文字环绕浮动体排版时会有问题，以及长单词前一行的空白我也不太满意。感觉只在长单词上指定 word-break: break-all 似乎比较好。 但这也不是我觉得最理想的状态，如果不能确定是不是长单词呢（例如用户自定义的用户名，可能短可能长）？我并不希望一个很短的用户名因为正好出现在行末而被打断了，而即使是长单词，如果起点已经很接近行末了，直接从下一行首开始也不错，没必要在上一行末尾放一两个字母。最理想的算法应该是对所有词一视同仁，如果哪个词不打断将会导致排版出现较大空白（上一行需要过早地结束）了，就打断这个词。目前 CSS 做不到这样的效果。 （CSS 还有个 hyphens: auto 的功能，可以自动找适合插入连字符的位置。但它没法保证能找到，这样不好，我希望优先找适合打断的位置，但如果找不到，也绝对不能溢出，可以随意打断。这个效果目前也是做不到的。）