Css中超出部分隐藏和强制换行

一、换行
1 word-break: break-all; 只对英文起作用，以字母作为换行依据。在行末的英文单词会被截断，一部分在行尾，一部分在另一行展示。
2 word-wrap: break-word; 只对英文起作用，以单词作为换行依据。 在行末的超出范围的英文单词，整个单词会直接在下一行展示。
3 white-space: pre-wrap; 只对中文起作用，强制换行。

二、超出部分隐藏

white-space:nowrap 是禁止换行。
overflow:hidden 是超出部分隐藏，不会溢出容器。
text-overflow:ellipsis 让多出的内容以省略号…来表示。

这个属性主要用于IE等浏览器，
Opera浏览器用-o-text-overflow:ellipsis;
Firefox浏览器没有这个功能，超出只能隐藏。

一、div内显示一行，超出部分用省略号显示：

.div1{
　　width: 100px;
　　height: 20px;
　　white-space: nowrap;
　　overflow: hidden;
　　text-overflow: ellipsis;
}  

二、div内显示多行，超出部分用省略号显示：

.div2{
   width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}