word_wrap、word_break和text-overflow的区别

word_wrap、word_break和text-overflow的区别？

当一个单词很长，超出容器的宽度时，浏览器会怎么显示呢？

<div class="content"><p class="text">this is a long wordddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p></div>

1.浏览器默认 如果有一个单词很长，导致一行中剩下的空间已经放不下它时，会把这个单词挪到下一行去。

2.加上word_wrap

word_wrap有两个可选的属性

normal只在允许的断字点换行（浏览器保持默认处理）。break-word在长单词或 URL 地址内部进行换行。
bbbbreak-word:首先会尝试挪到下一行，看宽度是否能放下，不能放下的话就在单词内断句。

.text {   word_wrap:break-word;}

.text {  word_wrap:normal;}

normal:只在允许的断字点换行

2.加入word_break：break-all;

暴力解决，不会把长单词放在一个新行里，当这一行放不下时直接强制断句。

3.text-overflow

clip修剪文本。 ellipsis显示省略符号来代表被修剪的文本。 string使用给定的字符串来代表被修剪的文本。

.text {text-overflow: clip;overflow:hidden; }

.text {text-overflow: ellipsis;overflow:hidden; }

.text {text-overflow: '***';overflow:hidden; }