首页 > 代码库 > 如何让多文本内容只显示一行,其余用省略号来显示
如何让多文本内容只显示一行,其余用省略号来显示
在此需要用到三个属性配合使用:
overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow:ellipsis;/*超出部分省略号显示*/
实例:
<p>
兴高采烈的破蛹 重获新生的冲动 寻找爱情世界 美梦
既然不是毛毛虫 就要壮烈的扑火 短暂青春要像 烟火
</p>
css代码:
<style>
*{
margin: 0;
padding: 0;
}
p{
width: 100px;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
效果如下:
</style>
如何让多文本内容只显示一行,其余用省略号来显示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。