css強制換行和超出隱藏實作單行和多行（程式碼實例）

這篇文章帶給大家的內容是關於css強制換行和超出隱藏實現單行和多行（程式碼實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

通俗點的解釋：

 word-break:break-all;只對英文起作用，以字母作為換行依據 
 word-wrap:break-word; 只對英文起作用，以單字作為換行依據 
white-space:pre-wrap; 只對中文起作用，強制換行 
 white-space:nowrap; 強制不換行，都起作用 
 white-space :nowrap; overflow:hidden; text-overflow:ellipsis;不換行，超出部分隱藏且以省略號形式出現（部分瀏覽器支援）

案例：案例裡面有註釋，

    

    

    

    

    



    
    

        

            我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃
        
        

            we are come from a world,we have us dream,wo never give up us deram;
        
        

            we are come from a world,we have us dream,wo never give up us deram;
        
    

    
    

        

            我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃
        
        

            we are come from a world,we have us dream,wo never give up us deram;
        
        

            we are come from a world,we have us dream,wo never give up us deram;
        
    

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

2. display:-webkit-box;必須結合的屬性，將物件作為彈性伸縮盒子模型顯示。

3. -webkit-box-orient必須結合的屬性，設定或檢索伸縮盒物件的子元素的排列方式。

但是為了相容於火狐瀏覽器，用css與js結合的方法來實現；

下面是實現的過程：

    
    
    
    




    
我们来自同一个世界我们都有自己的梦想，我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃
    
我们来自同一个世界我们都有自己的梦想，我们不曾放弃;我们不曾放弃
    
我们来自同一个世界我们都有自己的梦想，我们不曾放弃

以上就是對css強制換行和超出隱藏實作單行和多行（程式碼實例）的全部介紹，如果您想了解更多有關CSS視訊教學，請關注PHP中文網。

以上是css強制換行和超出隱藏實作單行和多行（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！