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

css3实现多行文本溢出显示省略号...

2016-04-29 16:55 666 查看
我们常用的就是实现单行文本溢出显示省略号，此时需要定宽度，代码如下：

.box{width:200px;
overflow: hidden;
text-overflow:ellipsis;//文本溢出显示省略号
white-space: nowrap;//文本不换行}
那如何实现多行文本溢出呢？
第一种：可以使用css3方法

<pre name="code" class="css">.proname {
display: -webkit-box;
-webkit-line-clamp: 2;//限制文本的行数，只显示两行
-webkit-box-orient: vertical;
overflow: hidden;
}



效果如下，真是方便又使用





常用css3小技巧

移除input类型为number在谷歌浏览器下自带的上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}

                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航