css3--单行、多行文本溢出
<style>
.div1 {
width: 200px;
height: 200px;
background: red url(img/user.png) no-repeat;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.div1:hover {
overflow: visible;
text-overflow: inherit;
} </style>
<div class="div1">
qwe Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae voluptatem sapiente fuga facere molestias numquam officiis beatae ex sit atque aspernatur quisquam commodi ratione perspiciatis ducimus dolor minima itaque obcaecati!
</div>
CSS实现单行、多行文本溢出显示省略号
方法一:只显示3行,在第三行结尾显示...
p{display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: ;
overflow: hidden;
}
方法二:适用性更广,未超出部分也会出现...
p{
position: relative;
line-height: 20px;
max-height: 40px; /*是行高的整数倍,防止下行文字露出*/
overflow: hidden;
} p::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 %);
}
css3--单行、多行文本溢出的更多相关文章
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)
参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...
- css实现单行,多行文本溢出显示省略号……
1.单行文本溢出显示省略号我们可以直接用text-overflow: ellipsis 实现方法: <style> .div_text{width: 300px; padding:10px ...
- CSS、j's单行、多行文本溢出显示省略号
在项目中,由于实际描述文字过多,导致初始页面纵向长度过长,也使得余下信息利用率降低:所以在文字过多的时候,初始化限制行数是有必要的 1. CSS单行文本溢出,显示省略号 <div style=& ...
- 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/JS学习】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势
引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: 也可能是多行的: 下面我就给大家展示如何简单或 ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
- 【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势
写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: 也可能是多行的: 下面我就给大家展示如何简单或优雅地实 ...
随机推荐
- amcharts去除版权标志
打开amcharts.js, 查找drb, 找到后,将drb:function(){......}程序{}中间内容清空, 或者改成drb:function(){return;}
- 壁虎书5 Support Vector Machine
SVM is capable of performing linear or nonlinear classification,regression,and even outlier detectio ...
- 一、SQL定义变量
http://blog.csdn.net/changwei07080/article/details/7561602 在SQL我们使用declare定义局部变量,同时可以使用set和select 对变 ...
- tensorRT 使用tensorflow的pb问价构建推理
- Spring <context:annotation-config> 与<context-component-scan> 的作用
<context:annotation-config> 与<context-component-scan> 的作用 <context:annotation-config& ...
- java上传文件代码
import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;impo ...
- 重读《深入理解Java虚拟机》六、Java泛型 VS C#泛型 (伪泛型 VS 真泛型)
一.泛型的本质 泛型是参数化类型的应用,操作的数据类型不限定于特定类型,可以根据实际需要设置不同的数据类型,以实现代码复用. 二.Java泛型 Java 泛型是Java1.5新增的特性,JVM并不支持 ...
- MVVM软件设计模式(转)
add by zhj: MVVM是一种软件设计模式,这里要说一下设计模式,我们通常所的设计模式是指面向对象中的设计模式,用在面向对象编程语言中.但软件设计模式是更高一个级别的设计模式,两者不是同一个东 ...
- 多点数据同步服务器sql汇总
1. a表中是否存在c的列 IF COL_LENGTH('FeeType', 'ftName') IS NOT NULL select N'存在'as result ELSE select N'不存在 ...
- Java与openssl的RSA算法
1.java生成的公私钥格式为 pkcs8(PKCS8EncodedKeySpec), 而openssl默认生成的公私钥格式为 pkcs1 2.java采用的rsa默认补齐方式是pkcs1 (RSA/ ...