超过固定宽度或行数显示“...”
2019-08-14 09:42:20来源:博客园 阅读 ()
做前端设计时,通常需要控制字符显示的宽度或者行数,多余字符通常以“...”替代;本文分两点情况来进行设置:
1、需要字符保持固定宽度,其余字符显示省略号(‘...’);
1 .addclass{ 2 width: 600px; 3 overflow: hidden; //这个是设置隐藏的。还有其他的,例如scroll,是超出固定长度,底部显示滚动条的。 4 text-overflow: ellipsis; //这个就是设置直接隐藏掉文字,还是显示...的。当前是显示省略号。直接省略是clip 5 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)不生效,尝试以下方法,(具体实现原理请移步:https://github.com/postcss/autoprefixer/issues/776):
.addclass{ overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; /* autoprefixer: off */ //加这两个注释就行。 -webkit-box-orient: vertical; /* autoprefixer: on */ display:-webkit-box; }
本文完结,希望可以帮助到大家!
原文链接:https://www.cnblogs.com/zw0718/p/11110014.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 两个div并排,右边div固定宽度,左边宽度自适应 2020-06-03
- 两个div并排,左边div固定宽度,右边宽度自适应 2020-06-03
- css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- 自适应宽高 2020-03-09
- javascript中获取dom元素的高度和宽度【转】 2020-03-05
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash