css强制换行 超出隐藏和限制行数

               

一、强制换行
1 word-break: break-all; 换行依据为字母，只对英文起作用。

2 word-wrap: break-word; 换行依据为英语单词，只对英文起作用。

3 white-space: pre-wrap; 强制换行，只对中文起作用，。

word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自动换行，它们的区别在于：

1、word-break:break-all 
假设div宽度为400px，它的内容就会到400px自动换行，如果该行末端有个很长的英文单词，它会把单词截断，一部分保持在行尾，另一部分换到下一行。

2、word-wrap:break-word 
例子与上面一样，但区别就是它会把整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉。

二、禁止换行 

1 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 

white-space:nowrap; 是禁止换行。

overflow:hidden; 超出容器隐藏，不然会撑破容器。
text-overflow:ellipsis; 让多出的内容以省略号...来表达。

三、限制在一个块元素显示的文本的行数。

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。