css实现强制不换行、自动换行、强制换行、超出2行省略号以及word-wrap: break-word和word-break: break-all的区别

1. 强制不换行，并且多行文字溢出显示省略号

.ellips{/*超出省略号*/
  white-space:nowrap;
  overflow:hidden; 
  text-overflow:ellipsis;
}
.ellips_line2,.ellips_line3{/*chrome下的私有属性*/
  display:-webkit-box; 
  -webkit-box-orient:vertical; 
  overflow:hidden;
} 
.ellips_line2{/*显示两行，超出的用省略号显示*/
  -webkit-line-clamp:2;
} 
.ellips_line3{ /*显示三行，超出的用省略号显示*/
  -webkit-line-clamp:3;
}

2. 自动换行

div{ 
    word-wrap: break-word;  /*只对英文起作用，以单词作为换行依据。*/
    word-break: normal; 
}

3. 强制英文单词断行

div{
    word-break:break-all;  /*只对英文起作用，以字母作为换行依据。*/
 }

4. word-wrap: break-word和word-break: break-all的区别

word-wrap: break-word; 比较温柔，会先另起一行，新的行放不到再把单词断了。如下图

word-break: break-all; 这娃比较暴力，他不会去新起一行，而是直接在后面跟着，如果放不下，则会强制把单词折断。如下图