当前位置:首页 > 程序心得 > 正文内容

多行文字溢出[...]的实现(text-overflow: ellipsis)

admin9年前 (2016-07-06)程序心得1918

对于单行文字, 很简单.

 


Css代码  收藏代码
  1. .oneLine {  

  2.     width: 200px;  

  3.     overflow: hidden;  

  4.     white-space: nowrap;  

  5.     text-overflow: ellipsis;  

  6. }  

 

对于多行文字, 上面的代码就不适用了. 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 来详细了解.

分享到:

扫描二维码推送至手机访问。

版权声明:本文由云河空间发布,如需转载请注明出处。

本文链接:http://yuyunhe.cn/index.php/post/160.html

分享给朋友:

“多行文字溢出[...]的实现(text-overflow: ellipsis)” 的相关文章

jQuery ajax使用$(this).parent()无效解决方法

本文章来给各位同学介绍一下关于jQuery ajax使用$(this).parent()无效解决方法,希望此方法对各位同学人有所帮助哦html 代码如下复制代码<p class="item"><input type="text" n...

Mysql 触发器使用(含navicat使用案例)

Mysql 触发器使用(含navicat使用案例)

CREATE TRIGGER updateutime2 BEFORE UPDATE on yp_cms_score for EACH ROW BEGIN  SET NEW.utime= ...

Jq 网页点击图片放大效果(单张)

Jq 网页点击图片放大效果(单张)

首先引入jq文件:  <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>$(function(){     $...

使用FastClick消除IOS点击延时提高程序的运行效率

FastClick是一个非常方便的库,在移动浏览器上发生介于轻敲及点击之间的指令时,能够让你摆脱300毫秒的延迟。FastClick可以让你的应用程序更加灵敏迅捷。支持各种移动浏览器,比如Safari、Chrome、Opera等。FastClick 是一个简单,易于使用的JS库用于消除在移动浏览器上...

ios5的safari浏览器的电话号码识别功能的禁用

更详细的apple官方文档: https://developer.apple.com/library/safari/#featuredarticles/iPhoneURLScheme_Reference/Articles/PhoneLinks.html在编写 HTML 时,有一个 meta...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。