前端样式：内容超过一行（n行），后面的内容变成省略号_超过一行省略_大白熊_BlankBear的博客-程序员秘密

CSS实现单行、多行文本溢出显示省略号（…）

 

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

实现方法：

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%);
}
.title{
       font-size: .7rem;
       line-height: 1.5rem;
 
       overflow: hidden;  /** 隐藏超出的内容 **/
       word-break: break-all;
       text-overflow: ellipsis; /** 多行 **/
       display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
       -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
       -webkit-line-clamp: 2; /** 显示的行数 **/
       margin-bottom: .3rem;
   }


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

注：

  1. 将height设置为line-height的整数倍，防止超出的文字露出。
  2. 给p::after添加渐变背景可避免文字只显示一半。
  3. 由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34823218/article/details/103515156

智能推荐

js原生项目(自动打字机html逻辑,css逻辑 ,js逻辑_贵哥的编程之路(热爱分享)的博客-程序员秘密

html:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;link rel="stylesheet" href="style.css" /&gt; &lt;title&gt;自动

[019] C#基础：理解装箱与拆箱_dotNET跨平台的博客-程序员秘密

.NET大牛之路 • 王亮@精致码农 • 2021.08.27前面我们讲到 .NET 平台支持的两大数据类型：值类型和引用类型。值类型比引用类型更高效，因为它没有指针引用，不用分配在托管堆...

《C champion》C语言发展__大峰_的博客-程序员秘密

C语言的发展历程C语言的发展历程非常有趣，简单地讲，它最初是叫A语言，从A语言发展到了B语言，又从B语言发展到了现在C语言，当然，还有之后的C++之类C like语言。A语言，全称是ALGOL（Algorithmic Language）语言，也就是算法语言的缩写，A语言可以算是高级程式语言的开山鼻祖，1958年，ACM（Association for Computing Machinery，...

初识MySQL_王芳雨的博客-程序员秘密

1、初识MySQLJavaEE: 企业级开发 Web前端 ：页面、展示、数据后台：连接点（连接数据库JDBC、连接前端（控制、控制视图跳转、给前端传递数据））数据库： 存数据(txt、Excel、word)只会写代码的是码农；学好数据库，基本能混口饭吃；在此基础上再学好操作系统和计算机网络，就能当一个不错的程序员。如果能再把离散数学、数字电路、体系结构、数据结构/算法、编译原理学通透，再加上丰富的实践经验与领域特定知识，就能算是一个优秀的工程师了。1.1、为什么学习数据库1、岗位技能需求

小波变换以及基于小波贝叶斯压缩感知资料收藏_贝叶斯收缩 小波变换_zhmy02094012的博客-程序员秘密

小波变换以及基于小波贝叶斯压缩感知资料收藏最近开始多注重了些论文，开始学习贝叶斯压缩感知的原理和一些方法，看看能不能从概率上去寻找一些不一样的东西。正巧同组同学正在研究基于小波的贝叶斯压缩感知，故向其要了两篇此方向的论文，观摩观摩，以求得能够多吸取些知识。对于贝叶斯压缩感知，Duke University 的网站上有不少很好的资料，网址为http://people.ee.duke.edu/

java 假设当前时间_Java如何比较当前时间是否在两个时间范围内_GQMind的博客-程序员秘密

假设ISODateTimeFormat.timeNoMillis()始终是适当的解析器,您希望使用Interval类.此外,使用parseLocalTime()而不是parseDateTime()然后使用convert it to a DateTime并使用.withOffsetParsed() method以确保正确处理时区.public static boolean isNowBetweenR...

随便推点

Java GC 原理_weixin_34090562的博客-程序员秘密

内存的分配和释放，典型的做法有1.全人工，也就是调用malloc/free,new/delete这些完全靠程序员，当然这样开发的程序很容易出现bug2.引用计数，对每个分配的对象增加一个引用计数器，这样带来的问题是内存额外开销，增加减少引用时的计算开销，特别在多线程时的加锁，而且还有循环引用的问题。3.标记清除，也就是Java GC采用的方式，通过判断有向图中每个节点是否能与根节点相...

caffe: compile error : undefined reference to `cv::imread(cv::String const&, int)' et al._woneil的博客-程序员秘密

caffe: compile error : undefined reference to `cv::imread(cv::String const&, int)' et al.come from http://www.cnblogs.com/wangxiaocvpr/p/5200837.htmlwhen I compile caffe file :.build_deb

Android多平台推送_fomin_zhu的博客-程序员秘密

1、概述android push集成了小米，华为，魅族，vivo和oppo五大厂家的push sdk，方便Android各项目集成push。2、Push类图3、Push时序图4、使用姿势配置global.gradle和build.gradle在project的build增加配置allprojects { repositories { maven {ur...

iOS OC中copy和mutableCopy的使用区别_oc copy 和mu ta_申子辰林的博客-程序员秘密

iOS OC中copy和mutableCopy的使用区别// 浅复制- (IBAction)shallowCopyAction:(id)sender { NSArray *array0 = @[@"A", @"B", @"C"]; NSArray *array1 = array0; NSArray *array2 = [array0 copy]; NSLog(@...

pytorch 入门（1）： pytorch库基本用法举例_知者智者的博客-程序员秘密

这一系列文章是对pytorch 入门教程的翻译和学习总结。英文原版可以从以下网址获得：https://pytorch.org/tutorials/beginner/deep_learning_60min_blitz.html目标：理解Pytorch Tensor 库和神经网络 训练一个小的神经网络来分类图片。本手册假定你对numpy库有一个基本的了解。注意：确保你的测试环境已经安装了torch 和 torchvision 包Pytorch是什么?Pytoch...

什么是沙箱机制_沙箱机制什么意思_如山似水0_0的博客-程序员秘密

1.为什么需要沙箱机制？默认情况下，一个应用程序是可以访问机器上的所有资源的，比如CPU、内存、文件系统、网络等等。但是这是不安全的，如果随意操作资源，有可能破坏其他应用程序正在使用的资源，或者造成数据泄漏。为了解决这个问题，一般有下面两种解决方案：（1） 为程序分配一个限定权限的账号：利用操作系统的权限管理机制进行限制（2） 为程序提供一个受限的运行环境：这就是沙箱机制2.什么是沙箱机...

推荐文章

热门文章

相关标签