您的位置：首页 > Web前端 > CSS

css控制文字行数，超出部分用省略号代替

2017-11-01 16:49 316 查看 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>显示多行文字，多余的用省略号代替</title>
<meta name="author" content="suixinMLF" />
<style>
.centent{
width:300px;
height:200px;
padding:10px;
font-size:14px;
line-height:25px;
border:1px solid #ebebeb;
display:-webkit-box;
display:-moz-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-justify-content:center;/*在主轴上对其的方向*/
justify-content:center;
-webkit-align-items:center;/*在交叉轴上的对其方式*/
}
.centent div{
height:75px;
overflow:hidden;/*须给一个高，以便不支持时不显示超出内容*/
display:-webkit-box;
-webkit-line-clamp:3;/*显示3行，超出的用省略号代替*/
-webkit-box-orient:vertical;
}
</style>
</head>
<body>
<div class="centent">
<div>
让子元素垂直居中，并且只显示三行文字，超出部分用省略号代替。
让子元素垂直居中，并且只显示三行文字，超出部分用省略号代替。
让子元素垂直居中，并且只显示三行文字，超出部分用省略号代替。
让子元素垂直居中，并且只显示三行文字，超出部分用省略号代替。
</div></div></body></html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航