文本溢出处理

Posted 2020-09-23 左耳_fly

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

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