文本超出隐藏

文本超出隐藏，用 ‘...’ 代替

原文URL：http://blog.csdn.net/bing0728004/article/details/51509435

• 关于css的三条用于处理超出文本的基础属性。
• • overflow:hidden; 超出的文本隐藏
  • text-overflow:ellipsis; 溢出用省略号显示
  • white-space:nowrap; 溢出不换行
• 关于 css3中对超出2行及以上的文字 处理
  • display: -webkit-box;
  • word-break: break-all; 强制换行
  • -webkit-box-orient:vertical; 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
  • -webkit-line-clamp:2; 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数

最后的css样式如下：

单行超出隐藏

// 单行超出隐藏
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行超出隐藏

// 多行超出隐藏
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;	// 文本排列方向
-webkit-line-clamp: 2;	// 超出的行数:2