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

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

admin10年前 (2016-07-06)程序心得1920

对于单行文字, 很简单.

 


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)” 的相关文章

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

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

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

微信支付 总提示get_brand_wcpay_request:fail 也不跳转支付页面 的解决方案

微信支付 总提示get_brand_wcpay_request:fail 也不跳转支付页面 的解决方案

最近在做微信支付,帮客户部署好环境后,测试微信支付,发现点击支付后老是提示:get_brand_wcpay_request:fail,于是找到代码中调用微信支付的代码段:WeixinJSBridge.invoke('getBrandWCPayRequest', { &nb...

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

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

jquery给url新增、修改、查询

(function ($) {  $.extend({   Request: function (m) {    var sValue = loca...

移动wap端做社会化分享组件(支持调用原生应用)

移动wap端做社会化分享组件(支持调用原生应用)

模板使用代码:(本源码已Tp模板中使用案例)<!-- sosh分享 --> <link rel="stylesheet" href="__PUBLIC__/libs/sosh/msosh.min.css&quo...

PHP数组无限分级数据的层级化处理代码

复制代码代码如下:/** * 创建父节点树形数组 * 参数 * $ar 数组,邻接列表方式组织的数据 * $id 数组中作为主键的下标或关联键名 * $pid 数组中作为父键的下标或关联键名 * 返回 多维数组 **/functi...

发表评论

访客

看不清,换一张

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