-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
                    一、div内显示一行，超出部分用省略号显示    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;二、div内显示两行或三行，超出部分用省略号显示    overflow: hidden;    text-overflow: ellipsis;    display: -webkit-box;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？
超出两行隐藏:
css3解决了这个问题，解决方法如下：
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组
				
在搭建前台文章列表中，需要实现div内文字显示两行，超出的则省略号显示。
找了很多，都貌似只能一行显示。最后在百度知道找到答案。
答案转自百度知道，题主的自答。
用的是-webkit-私有属性。text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-b...
				
1. 概述
1.1 说明
在项目过程中，有时候需要控制div内文字最多显示两行，超出的使用省略号进行处理。使用识别码/前缀-webkit进行处理可直接得到相应效果。
1.2-webkit
WebKit内核的css前缀为“-webkit-”，Comodo Drangon(科摩多龙)，苹果，安卓，搜狗高速浏览器3，快快浏览器，枫树浏览器，云游浏览器，360极速浏览器，世界之窗极速版...
				
1.没使用浮动（float）效果时是  div之间是上下布局
2.使用浮动（float）进行布局时，像左边布局，margin-left为最距外边距的那段距离
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; w
1：浮动：左边的给宽高，右边的不设宽，用margin-left把左边的宽给留出来
2：相对绝对定位：给父级加position:relative,左边的给宽高并absolute,右边的不设宽，给高度并用margin把left的宽留出来
3：flex：给父级设flex，left给宽高，right设置flex为1，给高
后面还加了个clear:both;的div来清除浮. 
问题来了,在IE8/IE9/chrome里面,怎么捣鼓,都没出什么问题~ 
这个时候在ff里面也是正常的.然后发现在ie6里面父div的边框没了, ie7里面,第一个换行符前面的div跑到父div的外面去了,认了老子做弟弟怎么行啊~ 
经过测试啊
				
可以使用 CSS 的 `text-overflow` 属性来实现超出部分显示省略号的效果。
首先，要确保文本内容被限制在一个区域内，可以使用 `overflow: hidden` 和 `white-space: nowrap` 属性将文本内容放在一行内，同时隐藏超出部分：
```css
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
然后，使用 `text-overflow: ellipsis` 属性就可以将超出部分显示为省略号：
```css
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
如果想要限制文本内容的行数，可以使用 `line-clamp` 属性。注意，这个属性并不是标准的 CSS 属性，目前只有 Chrome 和 Safari 浏览器支持。
例如，如果想要将文本内容限制在两行内，可以这样写：
```css
.ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;