Limit DIV width to parent DIV width (without explicit width declaration)

Question

Rquirements:

flexbox based pure HTML/CSS no Jquery/JS No explicit declaration of DIV width, just as much as is needed for content

In my code below I would like the footer to truncate with ellipses (so as to not explained the container div) or even better wrap to the next line.





    
    
    
    Document
    




    
        HEADER
        
            
                YES
                
                    
                        
                        
                    
                
            
            
                LABEL
                
                    aaaa
                    bbb
                
            
            
                NO
                
                    
                        
                        
                    
                
            
        
        
            FOOTERafd sdf fsddsfkjsdgfdskjgkjhgfa

Temani Afif · Accepted Answer

A solution is to make your content out of the flow by using absolute position and you won't need to specify a width as by specifying top/left/bottom/right you will take all the space already defined:

.truncate {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.olb-footer {
  position: relative;
}

.olb-footer:before {
  content: "A"; /* Add at least one hidden letter to create the space for a line */
  visibility: hidden;
}

.content {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}




  
    HEADER
    
      
        YES
        
          
            
            
          
        
      
      
        LABEL
        
          aaaa
          bbb
        
      
      
        NO
        
          
            
            
          
        
      
    
    
      FOOTERafd sdf fsddsfkjsdgfdskjgkj hgfa

Limit DIV width to parent DIV width (without explicit width declaration)

Answers (1)

Related Questions