css控制显示行数，多出部分显示省略号

标签：解决   webkit   其他   部分   弹性   规范   this   实现   大小   

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

　　display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

　　-webkit-box-orient:vertical;控制文本行数的方向，这是一个 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

　　text-overflow:ellipsis;，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

　　overflow:hidden;超出部分隐藏。

这个控制行数的方式出现的省略号在宽度和字体行数宽度刚好相近边缘时，样式不受hover控制，解决方法是通过js动态控制display属性。

比如

1,$(‘div‘).on(‘mouseover‘,function(){

　　$(this).css("display","block").css("color","red").css("display","-webkit-box");

})

$(‘div‘).on(‘mouseleave‘,function(){

　　$(this).css("display","block").css("color","#333").css("display","-webkit-box");

})

2,改变字体大小，加一像素或者减一像素

3，改变父盒子宽度

css控制显示行数，多出部分显示省略号

标签：解决   webkit   其他   部分   弹性   规范   this   实现   大小   

原文地址：http://www.cnblogs.com/fengzaiku/p/6706965.html