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结合的方法来实现；

下面是实现的过程：

    
    
    
    




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

 

还有一种方法是直接通过js截取前多少个字进行渲染，但这中方法误差大，