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>

 

posted @ 2015-10-20 15:19  asker_wind  阅读(380)  评论(0编辑  收藏  举报