需求：使用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中的的两行代码。

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