码迷,mamicode.com
首页 > Web开发 > 详细

如何让溢出容器的文本显示为省略号?(CSS)

时间:2015-03-11 17:04:24      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

  在实际的Web开发当中,经常需要将溢出容器边界的文本显示为省略号,其实这非常简单,设置几个CSS属性就可以达到效果,并且兼容各大浏览器,包括PC端和移动端。

  1、容器必须固定宽度,单位可以是像素或百分比;

  2、禁止容器内的文本换行;

  3、将溢出的内容隐藏掉;

  4、将溢出的内容替换为省略号。

  只要记住以上四个步骤就很容易想起代码了,我自己就是这样去记的。

  示例代码:

  .test{ width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

 

如何让溢出容器的文本显示为省略号?(CSS)

标签:

原文地址:http://www.cnblogs.com/calligraphy/p/4329973.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!