css自动省略号...,通过css实现单行、多行文本溢出显示省略号
网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示。
一、单行文本溢出显示省略号(…)
.demo{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
但是这个属性并不支持多行文本溢出显示省略号。
二、多行文本溢出显示省略号(…)
方法一
在WebKit浏览器或移动端的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个不规范的属性,它没有出现在 CSS 规范草案中。样式说明:
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
-webkit-line-clamp :代表行数,比如多少行设置省略号...。
.demo{
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: ;
}
方法二
.demo{
position: relative; line-height: 20px; max-height: 40px;overflow: hidden;
}
.demo::after{content: "..."; position: absolute; bottom: ; right: ; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff %);
background: -o-linear-gradient(right, transparent, #fff %);
background: -moz-linear-gradient(right, transparent, #fff %);
background: linear-gradient(to right, transparent, #fff %);
}
办公资源网址导航 https://www.wode007.com
适用范围:该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
注意事项:
将height设置为line-height的整数倍,防止超出的文字露出。
给p::after添加渐变背景可避免文字只显示一半。
由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。
方法三
用js也可以根据上面的思路去模拟,实现也很简单,推荐几个做类似工作的成熟小工具
1.clamp.js
//Single line
$clamp(myHeader, {clamp: }); //Multi-line
$clamp(myHeader, {clamp: }); //Auto-clamp based on available height
$clamp(myParagraph, {clamp: 'auto'}); //Auto-clamp based on a fixed element height
$clamp(myParagraph, {clamp: '35px'});
地址:https://github.com/josephschmitt/Clamp.js
2.jQuery插件-jQuery.dotdotdot
$(document).ready(function() {
$("#dome").dotdotdot({
// configuration goes here
});
});
jquery.dotdotdot一个jQuery插件用于当文本内容超出容器大小时显示省略号
css自动省略号...,通过css实现单行、多行文本溢出显示省略号的更多相关文章
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS单行、多行文本溢出显示省略号(……)
这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
- CSS单行、多行文本溢出显示省略号(……)解决方案
单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...
- 《CSS实现单行、多行文本溢出显示省略号》
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方式: overflow: hidden; te ...
- css 单行和多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- css实现单行、多行文本溢出显示省略号(…)
一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:elli ...
随机推荐
- 全网最全postman接口测试教程和接口项目实战~从入门到精通!!!
Postman实现接口测试内容大纲一览: 一.什么是接口?为什么需要接口? 接口指的是实体或者软件提供给外界的一种服务. 因为接口能使我们的实体或者软件的内部数据能够被外部进行修改.从而使得内 ...
- win7 64位系统怎么使用debug
安装DOSbox软件 下载个debug.exe然后把这放到D盘或E盘的根目录下 然后启动dosbox软件,在下面输入 mount c d:\ enter键 c: enter键 输入debug命令就ok ...
- 用云开发Cloudbase,实现小程序多图片内容安全监测
前言 相比于文本的安全检测,图片的安全检测要稍微略复杂一些,当您读完本篇,将get到 图片安全检测的应用场景 解决图片的安全校验的方式 使用云调用方式对图片进行检测 如何对上传图片大小进行限制 如何解 ...
- [C#.NET 拾遗补漏]04:你必须知道的反射
阅读本文大概需要 3 分钟. 通常,反射用于动态获取对象的类型.属性和方法等信息.今天带你玩转反射,来汇总一下反射的各种常见操作,捡漏看看有没有你不知道的. 获取类型的成员 Type 类的 GetMe ...
- monkey命令的基本使用
看到monkey,你想到了什么?今天给大家分享下monkey命令的基本使用 monkey测试是Android平台自动化测试的一种手段,通过monkey程序模拟用户触摸屏幕,滑动.按键操作等操作对设备上 ...
- virtualbox 基于nat模式搭建局域网并且和宿主机通信
1.VIRTUALbox 2.两台虚拟机,设置网络为DHCP方式 检查文件确认是dhcp模式不是的百度搜索修改:/etc/sysconfig/network-scripts/ifcfg-enps3(网 ...
- GoldenDict和AutoHotKey的安装和使用
GoldenDict 下载地址:http://sourceforge.net/projects/goldendict/files/early%20access%20builds/ 官网提供的版本很老, ...
- FWT,FST入门
0.目录 目录 0.目录 1.什么是 FWT 2. FWT 怎么做 2.1. 或卷积 2.2.与卷积 2.3.异或卷积 2.4.例题 3. FST 3.1. FST 怎么做 3.2.例题 1.什么是 ...
- PuTTY通过SSH连接上Ubuntu20.04
在PuTTY中连接到Ubuntu20.04大致需要几个步骤(不一定对应文本中的序号):1) 安装opensh-server (Ubuntu安装好之后 ,一般openssh-client自动已经安装好) ...
- 有a1,a2,a3,a4,四个数组,四个数组重新组合成一个数组(A),间隔是10个元素
好久没折腾Py了,这是去年年初2019.3月发在Q中的一个记录,因不从事这个,并且被在工厂耽误10几年,所以很少写Blog在这里,感觉这里比较正式,而在Q中只是随意性的记载, 但发布图片总是需要另外再 ...