如何实现css文本溢出显示省略号...

对于处理多行文本溢出时遇到的css属性做了一个简单的解析

display:box;是css3新添加的盒子模型属性;由于目前兼容性有问题，所以在使用的时候需要在box前面加前缀（-moz-、-o-、-webkit-），定义了box属性，子元素会被定义为内联元素，想要实现居中只能为父元素设置text-align:center。box-orient属性作用是为了确定父元素里子元素的排列方式垂直/水平(vertical/horizontal)。 -webkit-line-clamp是一个不规范的属性，可以把块容器中的内容限制为指定的行数，需要结合其他外来的WebKit属性。

在开发过程中，不乏遇到多行文本溢出，详情如下：

.div{
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis; /* 超出省略号显示 */
  display: -webkit-box; /* 特别显示模式 */
  -webkit-line-clamp: 2;
  line-clamp: 2;/* 行数 */
  -webkit-box-orient: vertical;/* 盒子中内容垂直排列 */
}

当超过单行时，显示省略号的处理

{
	white-space:nowrap;        // 强制一行显示
	overflow:hidden;          // 超出隐藏
	text-overflow:ellipsis;   // 省略号
}

关于display：box的详细解答-->display:box-css教程-PHP中文网