固定行数文字垂直居中与不固定行数文字垂直居中

固定行数文字垂直居中与不固定行数文字垂直居中

今天碰到一个固定固定行数文字垂直居中展示的问题，学到一个新的css属性-webkit-line-clamp。

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient :vertical;必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

重点是它不支持IE浏览器和火狐浏览器！！！！

不固定行数文字垂直居中就简单多了。

父级选择器{display: table;height:100px;}
子级选择器{display: table-cell; vertical-align:middle; text-align:center;}

但是不兼容IE6和7.