<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          css的多行省略號處理
          
				
           2018-5-30      周周      
          
			
          
			
          
				
                在我們的頁面布局的時候，經常會有這樣的需求，超過指定行文本的時候會進行（省略號...）的處理，那么我們改怎么設置css呢？如下：

          
            設置盒子的css為：

          
  
          

            
    
          • 
        overflow:hidden;;
    
            • 
    
          • 
        text-overflow:ellipsis;
    
            • 
    
          • 
        white-space:nowrap;
            
    
            • 

          

                 但是這樣只能顯示一行而不能實現指定行，所以還要其他的方法來實現指定行處理的。

          


          
     WebKit瀏覽器或移動端的頁面（大部分移動端都是webkit） 
          

          
            可以直接使用WebKit的CSS擴展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個不規范的屬性，它沒有出現在 CSS 規范草案中。 

          



          
  
          

          
            -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果，它需要組合其他的WebKit屬性。
          
       常見結合屬性：           

          

            
    
          • 
        display: -webkit-box; 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。 
    
            • 
    
          • 
        -webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。 
    
            • 
    
          • 
        text-overflow: ellipsis;，可以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本 。
            
    
            • 

          

               css 代碼:

          
  
          

            
    
          • 
        overflow：hidden; 
    
            • 
    
          • 
        text-overflow: ellipsis; 
    
            • 
    
          • 
        display: -webkit-box; 
    
            • 
    
          • 
        -webkit-line-clamp:2;/*這里控制著顯示多少行*/ 
    
            • 
    
          • 
        -webkit-box-orient:vertical; 
    
            • 

          


          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合