文本溢出处理

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

      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;/*使用省略号*/
  }

 

posted @ 2017-06-21 17:39  左耳_fly  阅读(201)  评论(0编辑  收藏  举报