<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--单行、多行文本溢出的更多相关文章

  1. CSS 单行 多行文本溢出显示省略号

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  2. HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  3. css实现单行,多行文本溢出显示省略号……

    1.单行文本溢出显示省略号我们可以直接用text-overflow: ellipsis 实现方法: <style> .div_text{width: 300px; padding:10px ...

  4. CSS、j's单行、多行文本溢出显示省略号

    在项目中,由于实际描述文字过多,导致初始页面纵向长度过长,也使得余下信息利用率降低:所以在文字过多的时候,初始化限制行数是有必要的 1. CSS单行文本溢出,显示省略号 <div style=& ...

  5. CSS实现单行、多行文本溢出显示省略号(…)

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

  6. CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)

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

  7. CSS单行、多行文本溢出显示省略号(……)

    这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...

  8. 【CSS/JS学习】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

    引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:   这个文本可能是单行的:   也可能是多行的:   下面我就给大家展示如何简单或 ...

  9. CSS单行、多行文本溢出显示省略号

    如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...

  10. 【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

    写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:   这个文本可能是单行的:   也可能是多行的:   下面我就给大家展示如何简单或优雅地实 ...

随机推荐

  1. 词云绘制wordcloud

    wordcloud是优秀的第三方词云展示库,该库以空格为分割线,按照单词出现的频率自动设置字号与颜色实例如下 import wordcloud#词云库 import jieba#分词库 a=open( ...

  2. log4j组件的用法(log4j1)

    在实际的项目开发和维护中,日志是经常用到的一个内容.遇到问题的时候,经常需要通过日志去查出问题的所在并解决问题. 通常我们会用: System.out.println(xxx); 来打印运行中所需要的 ...

  3. 解决webstorm拉取Vue项目时卡顿,及内存爆满问题

    最近在拉取Vue项目时总是会出现webstorm内存瞬间爆满,导致webstorm卡死,而且,有时在下载完node_modues后webstorm一直处于updating中,为此在网上找了很多方法结果 ...

  4. Codeforces 1132C - Painting the Fence - [前缀和优化]

    题目链接:https://codeforces.com/contest/1132/problem/C 题意: 栅栏有 $n$ 个节,有 $q$ 个人可以雇佣来涂栅栏,第 $i$ 个人可以涂第 $l_i ...

  5. 深度学习中将类别标签映射到one_hot向量

    有时我们的样本标签,都是标记从0开始直至到类别的个数.在模型训练的时候,这些标签需要变成one_hot向量,这样才能够跟softmax出来的概率做互熵损失,计算loss. 那么,映射的方法如下: de ...

  6. OpenGL开发学习指南二(glfw+glad)

    版权声明:本文为博主原创文章,未经博主允许不得转载.blog.liujunliang.com.cn https://blog.csdn.net/qq_33747722/article/details/ ...

  7. 创建结点 与 分配内存 Function to create a Node. Allocates memory for a new node. 主动申请内存 链表 指针的写法

    Self Referential Data Structure in C - create a singly linked list http://www.how2lab.com/programmin ...

  8. java发送get,post请求

    方法里面有注释:参照csdn里面的,项目用时自己改 package com.bst.express; import java.io.BufferedReader; import java.io.Dat ...

  9. 运行或开发.NET Core 的先决条件(支持项目、依赖项)

    Windows 上 .NET Core 的先决条件 https://docs.microsoft.com/zh-cn/dotnet/core/windows-prerequisites?tabs=ne ...

  10. kafka后台启动的命令

    kafka如果直接启动会出现问题,就是信息会打印在控制台,就会出现在控制台. 然后关闭窗口,kafka随之关闭,然后启动以下的命令就可以实现. ./kafka-server-start.sh ../c ...