码迷,mamicode.com
首页 > 其他好文 > 详细

文本溢出处理

时间:2017-06-21 18:23:51      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:设计   分页   计时   ide   滚动   简单   scroll   nowrap   wrap   

网页设计时经常发生文本内容超出容器范围的问题,在内容较多时多采用分页效果,在内容较少时则采用一些普通的文本溢出处理。常见的文本溢出处理方式有:

      1.简单裁切

      2.简单隐藏

      3.隐藏并显示省略号

      4.使用滚动条

 

  div.hide{
    overflow:hidden; /*简单隐藏*/
  }

  div.scroll{
    overflow:scroll; /*使用滚动条*/
  }

  div.clip{
    border:1px solid;
    overflow:hidden;/*超出部分隐藏*/
    white-space: nowrap;/*强制在一行显示*/
    text-overflow:clip;/*裁切*/
  }

  div.elli{/*超出部分省略号*/
    overflow:hidden;/*超出部分隐藏*/
    white-space: nowrap;/*强制在一行显示*/
    text-overflow:ellipsis;/*使用省略号*/
  }

文本溢出处理

标签:设计   分页   计时   ide   滚动   简单   scroll   nowrap   wrap   

原文地址:http://www.cnblogs.com/web-Knowledge/p/7060860.html

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