1. 单行文本省略

单行文本省略适用于文本超出内容显示区,则在末尾显示省略号

1.1 普通文本超出省略

普通文本超出显示省略号,示例:

.p{
height: 30px
line-height: 30px;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}

1.2 单元格文本超出省略

首先应设置表格属性table-layoutfixed;然后再为单元格设置省略,示例:

table{
table-layout: fixed;
}
table tr{
height: 30px;
line-height: 30px;
font-size: 16px;
}
table tr th,table tr td{
padding: 0 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

2. 多行文本省略

多行文本省略适用于文本超出内容显示区高度,则在最后一行的末尾显示省略号

2.1 css实现多行省略

通过使用伪元素添加content为...的方式显示,此种方法需要引入半透明图片作为伪元素背景,示例:

.p{
height: 66px;
line-height: 22px;
position: relative;
overflow: hidden;
}
.p::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 15px 0px 10px;
background: url(../images/modifyInfo/opacity.png) no-repeat right center;
}
.p:after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 15px 0px 10px;
background: url(../images/modifyInfo/opacity.png) no-repeat right center;
}

2.2 引入插件实现多行省略

通过引入溢出省略插件dotdotdot.js实现多行省略

下载地址: https://github.com/FrDH/jQuery.dotdotdot

引入dotdotdot.js,为要省略的内容施加方法即可,示例:

$('.p').dotdotdot();

切换内容显示/隐藏

$(function(){
//动态展开
var unReadNum = 0;
$('.right_newestState_con i').each(function(){
if($(this).hasClass('curr')){
unReadNum++;
}
$('.right_unreadInfo_p2 i').text(unReadNum);
});
$('.right_newestState_con em').each(function(){
this.flag = true;
var $this = $(this).parent().next();
function createDots() {
$this.dotdotdot();
}
function destroyDots() {
$this.trigger('destroy');
}
createDots();
$(this).on('click',function() {
if($(this)[0].flag){
unReadNum--;
$(this)[0].flag = false;
$(this).siblings('i').removeClass('curr');
$('.right_unreadInfo_p2 i').text(unReadNum);
if(unReadNum==0){
$('.body_right_unreadInfo span').remove();
}
}
$this.toggleClass('opend');
if ($this.hasClass('opend')) {
$(this).text('[点击收起]');
destroyDots();
} else {
$(this).text('[点击展开]');
createDots();
}
});
})
})

其他使用方法参考官方demo

ie8及其以下版本兼容性问题之文本省略的更多相关文章

  1. ie8及其以下版本兼容性问题之placeholder实现

    1. 普通浏览器下修改placeholder颜色 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定. 示例: input::-webkit-input-placeholder ...

  2. ie8及其以下版本兼容性问题之input file隐藏上传文件

    文件上传时,默认的file标签很难看,而且每个浏览器下都有很大差距.因此我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它.但是由于IE出于安全方面的考虑上传文件时必须点击file的浏览按 ...

  3. ie8及其以下版本兼容性问题之圆角

    解决办法:在http://css3pie.com/页面下载一个PIE.htc的文件,加载到根目录下,然后在css中加上一句behavior:url(../js/PIE.htc);如下: .border ...

  4. ie8及其以下版本兼容性问题之响应式

    解决办法:引入Respond.js让IE6-8支持CSS3 Media Query 使用方式 参考官方demo:http://scottjehl.github.com/Respond/test/tes ...

  5. ClientDataSet的版本兼容性

    ClientDataSet的版本兼容性 在Delphi的早期版本中,Data这个Variant类型的值内部使用的是AnsiString来存贮的字节流,但我并不确定Delphi从什么时候开始,将其改为了 ...

  6. 解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题

    问题描述:     在IE8及以下版本时,点击label标签无法自动触发checkbox的click事件,导致无法产生希望的效果. 原HTML代码: <div class="col-s ...

  7. 10. 选主算法、多版本兼容性及滚动升级 | 深入浅出MGR

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 目录 1. 选主算法 2. 多版本兼容性 3. MGR 5.7滚动升级至8.0 4. 小结 参考资料.文档 免责声明 文章 ...

  8. CSS学习笔记:溢出文本省略(text-overflow)

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

  9. CSS3中哪些新属性—阴影、文本省略(1)

    CSS3中的阴影,我知道的就是盒阴影和文字阴影.两者使用大同小异. 1.文字阴影 不知道为啥阴影会被开发出来,觉得这没啥好用啊.用了之后发现好像还行,使页面更有立体感了那么一点点.看起来趣味性强一点. ...

随机推荐

  1. 29. 误拼写时的fuzzy模糊搜索技术

    搜索的时候,可能输入的搜索文本会出现误拼写的情况,这时就需要es为我们进行智能纠错 比如有两个文档: doc1: hello world doc2: hello java     现在要搜索:hall ...

  2. 洛谷 3203 HNOI2010 BOUNCE 弹飞绵羊

    [题解] 这道题可以用Link-Cut Tree写.. 首先建立一个虚拟节点N+1,$i$与$N+1$连边表示$i$被弹飞了 对于修改操作,先$cut(i,min(n+1,i+k[i]))$,然后再$ ...

  3. GeoTrust 企业(OV)型 通配符(Wildcard) SSL证书

      GeoTrust 企业(OV)型 通配符(Wildcard)SSL证书(GeoTrust True BusinessID Wildcard SSL Certificates),支持通配符(Wild ...

  4. 【Codeforces 158C】Cd and pwd commands

    [链接] 我是链接,点我呀:) [题意] 让你实现Shell的cd和pwd操作 [题解] 用一个list表示当前的路径 如果路径以/开头则表示需要清空当前路径重新走路 否则在原来路径的基础上继续加就可 ...

  5. Beetl学习总结(4)——Web集成

    4.1. Web提供的全局变量 Web集成模块向模板提供web标准的变量,做如下说明 request 中的所有attribute.在模板中可以直接通过attribute name 来引用,如在cont ...

  6. CodeForcesGym 100735G LCS Revised

    LCS Revised Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on CodeForcesGym. O ...

  7. 重庆OI2017 小 Q 的棋盘

    小 Q 的棋盘 时间限制: 1 Sec  内存限制: 512 MB 题目描述 小Q正在设计一种棋类游戏.在小Q设计的游戏中,棋子可以放在棋盘上的格点中.某些格点之间有连线,棋子只能在有连线的格点之间移 ...

  8. EntityFramewordCore 2.2 DBFirst简单使用

    如何用EF Core连接数据库并且生成实体类? 1.通过Nuget安装依赖 Install-package Microsoft.EntityFrameworkCore Install-package ...

  9. Android 开发 ContentProvider 获取歌曲列表和联系人的样例

    ContentProvider(内容提供者)是Android中的四大组件之中的一个. 主要用于对外共享数据.也就是通过ContentProvider把应用中的数据共享给其它应用訪问.其它应用能够通过C ...

  10. Win8.1更新之后没法启动,怎样修复?

    1.问题 今天开笔记本的时候,发现电脑没法启动.屏幕显示"Recovery Your PC needs to be repaired...". 详细内容见下图: 2.解决的方法 2 ...