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社区 其它相关文章！