更新于

多行文本溢出显示省略号

发布于 / 分类: CSS / 仅有1条评论 / 阅读量: 671

css控制文本溢出隐藏

css兼容最好的就是单行文本溢出省略号了,我们先看下单行的css是怎么设置的:

p {
  white-space: nowrap;
  text-overflow: ellipsis; 
  overflow: hidden;   
}

表示文本不换行,做一行显示,然后文本超出p元素的宽度做省略号显示,且为了兼容低版本浏览器加了超出部分裁剪的css效果。

这个就是一个基本的文本溢出省略号显示的一个效果。

但是,单行已经不能满足我们日常所需了,在一些文本简介中,我们都希望的是能够有多行的显示,再多则做省略号显示,这个功能目前来说,只有webkit内核的浏览器支持这个效果,ie就绝缘了,移动端基本没有问题,因为移动端都是谷歌浏览器的内核,ios不知道,没有设备测试。

我们看看怎么做吧!

p {
  display:  -webkit-box;
  -webkit-line-clamp:  2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow : hidden;
}

这里最重要的一条就是-webkit-line-clamp;他的意思是规定一个元素显示的文本行数,但是这个css属性他不是一个标准的规范,为此还需要其他的属性来配合才能有效。

首先,这个元素要是一个-webkit-box弹性伸缩盒子,于是设置diplay为该属性。

然后就是盒子内的元素排列方式必须要是从上到下排列,也就是-webkit-box-orient属性要为vertical

然后我们设置-webkit-line-clamp的行数加上文本超出部分转为省略号才会生效。

但是这个会有一个问题,就是ie不支持,ie11这些都不能还好的兼容,如果你的项目都是针对新型浏览器开发,那么这些都不是问题。

兼容ie

jq插件:dotdotdot-js

jq的这个插件工作方式是在这个容器内,固定高度,超出的部分则做省略号,并且还是自动判断的,容器可以自由变化宽高。

dotdotdot地址

调用

  $("#wrapper").dotdotdot({
      //  设置,如果没啥设置可以不传参
  });

参数以键值对的形式

keyvalue说明
callbackfunction(){}回调函数,当文本截断后触发
ellipsis"u2026 "省略符号
heightnull/number元素的最大高度是多少,不设置则自动计算,输入数字则为像素px单位,用处不大
keepnullQuery selector for elements to keep after the ellipsis
tolerance0高度偏差
truncate"word"截断文字的方式:node、word、letter
watch"window"监听什么元素的变化进行更新,这里监听window的窗口变化

其实这个插件用起来一般般吧,我的业务需求是指定最多显示几行文字,超出部分隐藏,我并不想去控制容器的大小,我要的是容器固定,文字也显示在一定的高度范围。

这里就需要使用另一个插件了

js插件: Clamp.js

下载地址: clamp

调用:

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

两个参数,第一个为需要进行省略文字的元素,注意是dom元素,第二个参数为一个对象,对象中有一对键值对,表示超出几行进行省略隐藏。

这就很符合我的需要了,简单方便。

这个除了指定行数我们还有两个参数。

根据元素高度自动截断

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: auto});

指定高度,超过高度进行截断

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: '35px'});

以上就是关于文本溢出省略号的方式了,基本够用了。

仅有一条评论

    木灵鱼儿
    木灵鱼儿

    来自 Windows10-火狐浏览器 的网友发布于 154 天前

    测试

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有391条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
设置
配色方案

布局

购买