Css文本超出3行自动隐藏显示省略号

最新推荐文章于 2024-06-05 17:42:57 发布
最新推荐文章于 2024-06-05 17:42:57 发布
阅读量5.8k 收藏
点赞数 1
分类专栏： Css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heshuncheng/article/details/108006872
版权

Css文本超出3行自动隐藏显示省略号

核心样式

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

less 样式

生成show-row-1 ,show-row-2,show-row-3,show-row-4 样式

each(range(4),{
   
  .show-row-@{
   value
最低0.47元/天 解锁文章
_hsc
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS文本超出2行就隐藏并且显示省略号
01-19
超出一行隐藏: overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？ 超出两行隐藏: css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） -webkit-line-clamp:2; //这个属性不是css的规范属性，需要组
css 文本超出就隐藏并且显示省略号
lee754922002_的博客
03-25 366
溢出用省略号显示。
css文字超出元素省略,单行、多行省略
最新发布
阿乐的博客
06-05 513
通用CSS。
css文本超出隐藏 显示三个点
sddzlsc的博客
07-23 7733
文本超出显示三个点一般分两种情况 　　一,单行文本超出隐藏 　　　overflow:hidden; 　　　text-overflow:ellipsis; 　　　white-space:nowrap; 　　二,多行文本超出隐藏 　　　　text-overflow: -o-ellipsis-lastline; 　　　　overflow: hidden; 　　　　text-overflow: ellipsis; 　　　　display: -webkit-box; 　　　　-webkit-l..
css3实现超过两行文字，超出用三个点显示（兼容性不行，仅供学习）
weixin_30323631的博客
11-08 545
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> p{ width:300px; height...
CSS实现单行、多行文本超出后隐藏并显示省略号
JulyNight的博客
05-13 2119
单行超出文本隐藏并显示省略号 overflow: hidden; // 超出隐藏 text-overflow: ellipsis; white-space: nowrap; // 限制文本超出宽度后不能换行 源码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>单多行文本超出隐藏并展示省略号</title> <style&
element ui Table 文字超出3行 用...省略号表示，并在toolti
Igiveufireworks的博客
05-05 967
table文字过长，最多展示3行，超出用...省略号显示，鼠标移入时用tooltip文字提示，文字没有超出3行则不用tooltip。
css文本超出自动换行超出3行字段显示省略号
weixin_70243424的博客
07-22 2121
【代码】css文本超出自动换行超出3行字段显示省略号。
CSS文本超出指定宽度后隐藏并显示为省略号的实现方法
09-24
下面小编就为大家带来一篇CSS文本超出指定宽度后隐藏并显示为省略号的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS自动换行、强制不换行、强制断行、超出显示省略号
09-27
主要介绍了CSS自动换行、强制不换行、强制断行、超出显示省略号的相关资料,需要的朋友可以参考下
CSS实现不换行/自动换行/文本超出隐藏显示省略号
08-11
CSS实现不换行/自动换行/文本超出隐藏显示省略号；自动换行，强制不换行，单行文本不换行多余文本显示省略号，第n行显示省略号,亲测有效。
css把超出的部分显示为省略号的方法兼容火狐
09-06
兼容火狐css控制超出部分用省略号代替
CSS方法 p标签内容文本超出3行后隐藏显示 ...
书山有路勤为径，学海无涯苦作舟
02-06 1631
【代码】CSS方法 p标签内容文本超出3行后隐藏显示 ...
CSS超出两行隐藏，但第三行文字溢出
weixin_45554952的博客
08-06 891
超出隐藏代码： /*文字超出两行省略*/ .two-row-hide { white-space: normal; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } 原本页面使用方
flex布局下文字超出隐藏失效解决办法
SeaBirds的博客
08-30 1618
1、flex盒子设置min-width:0; 2、文字内容外套一层容器；
vue 超出三行隐藏_《vue+vant 文本超出两行部分省略号显示》
weixin_39530647的博客
01-30 1335
今天做移动端项目，遇到了这个问题​面向百度后总结得到了这个结果。首先，我们要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出则不换行 这里不符合我们的要求所有舍弃掉css3完美解决了这个问题，解决方法如下：display:-webkit-box; //将对...
文本超出3行后省略号，展开/关闭按钮显示全部
weixin_45626517的博客
10-25 1129
<p id="FEllipsis" ref="FEllipsis" class="desc"> {{ promoCouponDesc }} </p> <div class="bottom"> <div v-if="extraCouponInfo.giftDesc" class="giftDesc"> ...
css 多行超出隐藏
weixin_40790248的博客
09-14 460
webkit-box是一个CSS3的属性，用于实现多行文本显示。-webkit-box-orient属性用于设置文本的方向，vertical表示垂直方向。-webkit-line-clamp属性用于设置需要显示的行数，这里设置为3行。text-overflow属性用于设置文本溢出时的省略号。-webkit-line-clamp属性为需要显示的行数。
css超出多行隐藏记录
颜良文丑的博客
01-06 511
根据需求进行单行隐藏还是多行隐藏打点
css 段落超出3行显示省略号
06-09
想要实现段落超出3行显示省略号的效果，可以使用CSS的`-webkit-line-clamp`属性。但是，`-webkit-line-clamp`只对单行文本生效，对于多行文本需要进行一些特殊处理。 以下是一个实现段落超出3行显示省略号的示例代码： ```css .box { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } ``` 其中，`.box`为段落的类名，设置了段落的显示方式为弹性盒子模型，限制文本显示为3行，垂直排列。`overflow: hidden;`表示超出部分隐藏，`text-overflow: ellipsis;`表示超出部分用省略号代替。这样，当文本超出3行时，就会自动显示省略号了。 需要注意的是，`-webkit-line-clamp`只在WebKit内核的浏览器中生效，如Chrome、Safari等。如果需要兼容其他浏览器，可以考虑使用JS来实现该效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值