CSS文字超出部分显示省略号、多行超出部分显示省略符 多行文本溢出

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>    
    <body>
        <style type="text/css">
        /*单行==所有浏览器*/
        #test{
        width:150px;height:20px;line-height:20px;
        text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
        }
        /*多行==高版本浏览器和手机端可以用*/
        #test2{
        width:150px;line-height:20px;/*height:60px;*/
        display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow: hidden;
        
        }
        </style>
        <div id="test">小虾奋斗起来吧加油加油加油加油加油加油</div> <br /><br /><br />
        <div id="test2">小虾奋斗起来吧加油加油加油加油加油加油小虾奋斗起来吧加油加油加油加油加油加油小虾奋斗起来吧加油加油加油加油加油加油</div>
    </body>
</html>

 

你可能感兴趣的:(CSS文字超出部分显示省略号、多行超出部分显示省略符 多行文本溢出)