代码改变世界

CCS3属性之text-overflow:ellipsis;的用法和注意之处

2016-03-27 21:40  西不肚  阅读(119)  评论(0)    收藏  举报

语法：

text-overflow：clip | ellipsis

默认值：clip

适用于：所有元素

clip： 当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。 
ellipsis： 当对象内文本溢出时显示省略标记（...）。

在使用的时候，有时候发现不会出现省略标记效果，经过测试发现，使用ellipsis的时候，必须配合overflow:hidden; white-space:nowrap; width:50%;这三个样式共同使用才会有效果，示例代码：

<style type="text/css">
    .test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;}
</style>

<div class="test">关于**产品的推广关于**产品的推广关于**产品的推广</div>

上面的width属性根据实际需要填写，其它样式是固定的。

转载请注明：http://www.tea119.com

 

 

对于多行文字, 上面的代码就不适用了. web-kit based 的浏览器提供了对这个特殊需求的支持.

 

 

Css代码  收藏代码
  1. .twoLine {  
  2.     overflow: hidden;  
  3.     text-overflow: ellipsis;  
  4.     display: -webkit-box;  
  5.     -webkit-line-clamp: 3;  
  6.     -webkit-box-orient: vertical;  
  7. }  

 

你只要调整-webkit-line-clamp的值就能实现在第n行[...].

 

对于其他内核的浏览器就只能用javascript来hack了.

 

Vimeo的Joe已经实现了这一功能, 可以参考 https://github.com/josephschmitt/Clamp.js 来详细了解.