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;必须结合的属性，将对象作为弹性伸缩盒子模型显示。

   立即学习“前端免费学习笔记（深入）”；

   

   eShop公众号商城

   项目介绍： eShop是基于eFrameWork低代码开发平台搭建的微信公众号商城系统，主要功能包括：产品、订单、购物车、收藏、收货地址。已集成微信登录、微信支付、分享等接口。更多功能可自行二次开发实现。 当前发布的数据库有两个版本，SQLServer和SQLite（无需安装数据库),默认为SQLite，根据实际需要切换。 项目版本：VS2012+， 数据库版本：S

   下载

3. -webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

但是为了兼容火狐浏览器，用css与js结合的方法来实现；

下面是实现的过程：

    
    
    
    




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

以上就是对css强制换行和超出隐藏实现单行和多行（代码实例）的全部介绍，如果您想了解更多有关CSS视频教程，请关注PHP中文网。