CSS 文本溢出部分显示省略号

news/2024/12/24 1:06:48

单行结尾溢出:

用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览。

width:300px;
overflow: hidden; text-overflow:ellipsis; white-space: nowrap;

效果如图:
dome1

--------------------------------------------------------------

多行结尾溢出:

display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;

效果如图:
dome2

适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

--------------------------------------------------------------

拓展内容:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;} p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); }

效果如图:
dome3
适用范围:
该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注:

  1. 将height设置为line-height的整数倍,防止超出的文字露出。
  2. 给p::after添加渐变背景可避免文字只显示一半。
  3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。

 


http://www.niftyadmin.cn/n/2013582.html

相关文章

更新队友POM文件后报错

2019独角兽企业重金招聘Python工程师标准>>> 打开报错的地方的pom及其引用方法所在文件的pom,观察其版本号是否一致,不一致进行更改 转载于:https://my.oschina.net/u/3717819/blog/1831838

弄懂char/varchar/nchar/nvarchar

名称长度说明推荐场景char定长速度快&#xff0c;占空间大英文/数字varchar变长不定长&#xff0c;空间小&#xff0c;速度慢英文/数字nchar定长速度快&#xff0c;占空间大汉字nvarchar变长不定长&#xff0c;空间小&#xff0c;速度慢汉字

c++ 实现 http 上传和下载

代码下载地址: http://download.csdn.net/detail/mtour/8243527 最近写了个程序需要用到http通讯&#xff0c;由于flash空间比较小&#xff0c;没有考虑 libcurl库&#xff0c;用c封装了一个http类&#xff0c;实现了http 文件上传和下载 [cpp] view plaincopy #include <…

NodeJS 服务器基本模板

基本server配置 cookie / session / get数据 / post数据 / 请求方法 const expressrequire(express); const staticrequire(express-static); const cookieParserrequire(cookie-parser); const cookieSessionrequire(cookie-session); const bodyParserrequire(body-parser); …

mysql 中的信息数据库以及 shell操作sql

2019独角兽企业重金招聘Python工程师标准>>> Information_schema 是 MySQL 自带的信息数据库&#xff0c;里面的“表”保存着服务器当前的实时信息。它提供了访问数据库元数据的方式。 什么是元数据呢&#xff1f;元数据是关于数据的数据&#xff0c;如数据库名或表…

Makefile初探

选择一个目录创建一个Makefile文件&#xff1b; 注意第二行的开头需要时TAB建空开&#xff0c;不要用空格 执行make make的时候&#xff0c;无论你创建的是makefile还是Makefile都可以识别 &#xff0c;不在乎开头的字母是否大写。 makefile中的第一个重要概念是目标&#xff0…

葵花宝典之玩转众包——发包方

为什么80%的码农都做不了架构师&#xff1f;>>> 法则一&#xff1a; 项目发布 1. 一个简单明了的项目标题&#xff0c;有助于提高项目的报名率 项目标题是给接包方的第一印象&#xff0c;如同项目的名片&#xff0c;标题应直接明了&#xff0c;如&#xff1a;“b…

python分析nmon并获取性能指标数据的姿势是这样的

一 背景在性能测试或Linux服务器运维中&#xff0c;都会涉及对系统资源使用情况的监控&#xff0c;除了常用的系统命令外&#xff08;如top、iostat、free等&#xff09;&#xff0c;比较全面的资源数据监控工具是NMON&#xff0c;通过在服务器上运行NMON可以定期监控硬件资源并…