首页 > 代码库 > word-wrap和word-break

word-wrap和word-break

今天在群里回答一个关于----内容顶开或溢出指定容器边界自动换行-----的问题

我回答的是    word-wrap:break-word;测试中也可以,没有出现问题

 

群里一个热心的朋友说的是 word-break:break-all;

我当时觉得两者没有多大区别,实际上我错了,对于细节问题没有仔细研究

翻看了下参考手册,这么说的

-----------------------------------------------------------

word-break:normal | keep-all | break-all

normal:依照亚洲语言和非亚洲语言的文本规则,允许在字内换行。

keep-all:与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本。

break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字母间断行。 

设置或检索当内容超过指定容器的边界时是否断行。

---------------------------------------------------------------------------

word-wrap:normal | break-word

normal:允许内容顶开或溢出指定的容器边界。

break-word:内容将在边界内换行。如果需要,单词内部允许断行。 

设置或检索当内容超过指定容器的边界时是否断行。

------------------------------------------------------------------

大概一看两者并没有多大区别,但是你要仔细看就明白区别所在了

放张图

这里已经很明显的看出来二者的区别了

 

word-wrap:break-word 是用来决定允不允许单词内断句的,如果不允许的话长单词就会溢出,它还是会首先尝试挪到下一行,看看下一行的宽度够不够,不够的话 就进行单词内的断句

word-break:break-all 它不会尝试把长单词挪到下一行,而是直接进行单词内的断句

无论如何,这些都会对西文照成影响的,实际开发中这点需要注意的

word-wrap和word-break