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

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

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

对于单行文字, 很简单.

Css代码  
.oneLine {  
    width: 200px;  
    overflow: hidden;  
    white-space: nowrap;  
    text-overflow: ellipsis;  
}  

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

Css代码  
.twoLine {  
    overflow: hidden;  
    text-overflow: ellipsis;  
    display: -webkit-box;  
    -webkit-line-clamp: 3;  
    -webkit-box-orient: vertical;  
}  

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

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

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

分享到：

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

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

分享给朋友：

返回列表

上一篇：MySQL获得当前日期时间\时间戳函数

下一篇：css做屏幕适配

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

SVN Skipped 'xxx' -- Node remains in conflict 错误的解决办法

svn提交发现错误#cd /home/svn/app/# svn upUpdating '.':Skipped 'xxx' -- Node remains in conflictAt revision 1054.Summary of conflicts: ...

Thinkphp3.2.x 多图上传几个注意点

1、<form enctype="multipart/form-data">2、<form enctype="multipart/form-data">3、<input type="file...

Mysql 触发器使用（含navicat使用案例）

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

css做屏幕适配

CSS判断不同分辨率浏览器（显示屏幕）显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断，但IE9以下版本不支持CSS3技术，这里DIVCSS5给大家介绍通过JS实现低版本的浏览器也支持CSS3实现实用布局CSS DIV网页布局中当分辨率小于等于1024px（像...