隐居以求其志,行义以达其道
文字换行
文字换行

文字换行

先来看一个文本换行的现象:

为什么上面的例子在“中文”后换行了,在”xyzxyz……”处却没换行而溢出了?

因为浏览器默认是在断字点处换行,“文”和后面的“ghi……”是一个明显的断字点,而“ghi…xyz”被认为是一个长单词(虽然无意义)它内部不是有效的断字点,所以没换行。

word-break:指定了怎样在单词内断行

normal:使用默认的断行规则。
break-all:对于 non-CJK (CJK 指中文/日文/韩文) 文本,可在任意字符间断行。
keep-all:CJK 文本不断行。Non-CJK 文本表现同normal

overflow-wrap(word-wrap):与 word-break 相比,overflow-wrap 仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生换行。就是不那么暴力,能尽量让长单词完全的显示出来

normal:行只能在正常的单词断点(例如两个单词之间的空格)处换行。
anywhere:为防止溢出,如果行中没有其他可接受的断点,则不可断的字符串(如长词或 URL)可能会在任何时候换行。在断点处不会插入连字符。在计算最小内容内在大小时,会考虑由单词换行引入的软换行机会。
break-word:与 anywhere 值相同,如果行中没有其他可接受的断点,则允许在任意点将通常不可断的单词换行,但在计算最小内容内在大小时不考虑断字引入的软换行机会。