单行多行文字溢出显示省略号

Posted 2020-08-11

1. 单行文字  

<div class=‘line‘>我是单行文字测试我是单行文字测试我是单行文字测试我是单行文字测试</div>

.line{
            width:200px;
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

white-space:nowrap; (强制显示一行)
overflow:hidden; （文字超出部分隐藏）
text-overflow:ellipsis; （文字超出部分显示省略号）

 

2. 多行文字

<div class=‘moreline‘>我是多行文字测试我是多行文字测试我是多行文字测试我是多行文字测试我是多行文字测试我是多行文字测试我是多行文字测试我是多行文字测试我是多行文字测试</div>

.moreline{
            width:200px;
            overflow:hidden;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            text-overflow: ellipsis;
        }

display: -webkit-box; 

-webkit-line-clamp:2;（后面的数字表示显示的行数）
-webkit-box-orient:vertical;