网页设计时经常发生文本内容超出容器范围的问题,在内容较多时多采用分页效果,在内容较少时则采用一些普通的文本溢出处理。常见的文本溢出处理方式有:
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;/*使用省略号*/
}
时间: 2024-10-24 21:44:17