首页 > 作文

超过固定宽度或行数显示“…”

更新时间:2023-04-06 08:10:34 阅读: 评论:0

  做前端设计时,通常需要控制字符显示的宽度或者行数,多余字符通常以“…”替代;本文分两点情况来进行设置:

  1、需要字符保持固定宽度,其余字符显示省略号(‘…’);

  

1 .addclass{2     width: 600px;3     overflow: hidden;       //这个是设置隐藏的。还有其他的,例如scroll,是超出固定长度,底部显示滚动条的。4     text-overflow: ellipsis;   //这个就是设置直接隐藏掉文字,还是显示...的。当前是显示省略号。直接省略是clip5     display: inline-block;     //根据不同标签display值,有的不用加。6 }

  2、需要字符显示固定行数(本文以三行为例),其余字符显示省略号(‘…’);

.addclass{    overflow: hidden;          text-overflow: ellipsis;    -webkit-line-clamp: 3;  //这里就是设置超出几行隐藏    -webkit-box-orient: vertical;    display:-webkit-box;  //根据不同标签display,有的不用加}

  以上方法基本可以满足需求。当使用第二种情况(多行隐藏)时,有童鞋遇到过设置不生效,参考如下方法:

  (1)于页面标签添加style=”display:-webkit-box;”即可;(一般情况都是-webkit-box-orient,这个属性未生效)

  (2)如果方新闻业务法(1)不生效,尝试以下方法,(具体实现原理请移步:):

.addclass{逍遥游第一段    overflow: hidden;          t洗牙的好处和坏处ext-overflow: ellipsis;    -webkit-line-clamp:逆袭电影 3;    /* autoprefixer: off */     //加这两个注释就行。    -webkit-box-orient: vertical;    /* autoprefixer: on */   综合素质必背知识点 display:-webkit-box; }

  本文完结,希望可以帮助到大家!

本文发布于:2023-04-06 08:10:33,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/ad2c672d85f64f03dd7c326267e265b8.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:超过固定宽度或行数显示“…”.doc

本文 PDF 下载地址:超过固定宽度或行数显示“…”.pdf

标签:字符   省略号   本文   情况
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图