flex 遇上white-space:nowrap的2种解决方法-白红宇

flex 遇上white-space:nowrap的2种解决方法

阅读量：4680 次

发布时间：2019-06-09

本文共 1446 字，大约阅读时间需要 4 分钟。

需求：使用flex布局，超出部分想使用点点点显示

一、方法1使用min-width:0

效果：

HTML代码如下：


         
              
                   
                        
                     
        
            
                        
         景龙社区老年协会景龙社区老年协会
                
         舞动青春，展示风采景景龙社区老年协会
                
         唱歌、跳舞、太极拳、广场舞景龙社区老年协会
            
        
            
                        
         已加入人数：1070人
                
         空缺人数：107人
            
        
        
       
        
                   
                        
         
          团长
         
                
         
          陈雪娇防守打法
         
                
         
          13788827576
         
            
        
            
                        
         查看成员                
         加入团队

关键的CSS代码：整个头部设置为display:flex，两端的宽度固定，中间设置为flex:1,同时设置min-width:0

.team-container .team-body .team-item .team-item-header {
     height: 3.456rem;  display: flex;  align-items: center;  position: relative;}.team-container .team-body .team-item .team-item-header .team-item-content {
     flex: 1;  color: #AAAAAA;  min-width: 0;}

二、第二种方式，代码如下，关键代码是.content中的的两行代码。

            
             
             
             测试                        
                 
                      
       地坛离我家很近。或者说我家离地坛很近。总之，只好认为这是缘分。地坛在我出生前四百多年就座落在那儿了，而自从我的祖母年轻时带着我父亲来到北京，就一直住在离它不远的地方

转载于:https://www.cnblogs.com/llcdxh/p/9869876.html

你可能感兴趣的文章