木灵鱼儿

博客
正在进入:首页

更新于

多行文本溢出显示省略号

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

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就行,使用方式暂时我还没时间研究,用法也很简单,有直接添加class的方式调用,也可以直接js文件里面调用,具体可以自行去研究,不过ie11是有效的。

dotdotdot地址

Info
Site Info

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

创建于20156

总共发表了173篇文章

目录树
Archive
Article Archive
Weather
Weather

湿度
设置
配色方案

宽度

现在购买