欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

文本溢出省略号处理

程序员文章站 2022-04-22 13:38:34
...

单行处理

  • 实现单行文本溢出显示省略号,此时需要定宽度
    .box{
    width:200px;  
    overflow: hidden;  
    text-overflow:ellipsis;//文本溢出显示省略号  
    white-space: nowrap;//文本不换行}  

多行处理

  1. css3方法
.box {  
    display: -webkit-box;  
    -webkit-line-clamp: 2;//限制文本的行数,只显示两行  
    -webkit-box-orient: vertical;  
    overflow: hidden;  
}