首页 > 其他 > 详细

如何让多文本内容只显示一行,其余用省略号来显示

时间:2016-12-20 23:25:55      阅读:372      评论:0      收藏:0      [点我收藏+]

在此需要用到三个属性配合使用:

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>

如何让多文本内容只显示一行,其余用省略号来显示

原文:http://www.cnblogs.com/mmykdbc/p/6204471.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!