开启辅助访问
帐号登录 |立即注册

如何解决CSS单行文本溢出省略问题

 
2020092904093139.jpg

一、CSS单行文本溢出省略问题:
[CSS] 纯文本查看 复制代码
.overhidde{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

说明:
这里的width属性是必须的,因为需要知道它的宽度是多少,才能判断溢出;
overflow:hidden; 是为了隐藏溢出的文本;
white-space: nowrap; 默认。空白会被浏览器忽略;
text-overflow: ellipsis; 显示省略符号来代表被修剪的文本。


二、css多行文本溢出省略问题
[CSS] 纯文本查看 复制代码
.overhidden2{
height:53px;
width:100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

说明:
在这里height属性和overflow属性相结合是为了隐藏省略号一下的文本,大家可以试一下不加的效果,就一目了然了。
line-clamp属性是为了控制文本显示多少行。
关于display和box-orient,在这里简单说一下:
必须定义display属性才可以对box进行划分。
box-orient 属性指定一个box子元素是否应按水平或垂直排列。



回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。