如何包装表格单元格<td>使用 CSS 的内容？

HTML 中的表格是荒谬的元素。将 CSS 属性应用于表格元素并非易事。作为一个高度结构化的元素，CSS 属性有时会在结构的层次结构中丢失。表格的内容也很可能会改变表格的结构或维度。例如，驻留在表格单元格中的长字会导致单元格宽度增加。如果您解决了该问题，则可能会发生长字跨越单元格边界的情况。我们可以通过对单元格数据执行自动换行来避免这种情况。

有两种使用 CSS 包装表格单元格 内容的方法，如下所示：

• 使用自动换行属性：此属性用于允许长单词中断并换行到下一行。
• 使用分词属性：该属性用于指定当单词到达行尾时如何中断单词。文本中的换行符可能出现在某些空格中，例如有空格或连字符时。

例子：

  

    
      
    

  

    
GeeksforGeeks
      
    
Simple Example Without Word Wrap
      
    
        
            
            
            
        
          
        
            
            
            
        
          
        
            
            
            
        
    
Course Name
Specifications
Duration
Data Structures and Algorithms

                It includes pre-recorded premium
                
                    Videolectures&programmingquestions
                 for practice.
            
4 months
GFG Placement Programme

                This course helps students to prepare
                for the Recruitment drive.
            
3 months

  

输出：

注意：在上表中，我们定义了一个600px的表格宽度并将 table-layout 应用为 fixed 。观察到标记为 red的长单词是通过删除空格而形成的，例如 purpose。

方法一：使用自动换行属性：自动换行：断字；属性用于在适当的断点处中断长字。

例子：

  

    
  
    

  

    
GeeksforGeeks
  
    
Wrap Table Cell td Content using word-wrap property
  
    
        
            
            
            
        
  
        
            
            
            
        
  
        
            
            
            
        
    
Course Name
Specifications
Duration
Data Structures and Algorithms

                It includes pre-recorded premium
                
                    Videolectures&programmingquestions
                 for practice.
            
4 months
GFG Placement Programme

                This course helps students to prepare
                for the Recruitment drive.
            
3 months

  

输出：

方法二：使用断字属性：断字：break-all；属性用于在任何字符处断开单词。

例子：

  

    
  
    

  

    
GeeksforGeeks
  
    
Wrap Table Cell td Content using word-break property
  
    
        
            
            
            
        
  
        
            
            
            
        
  
        
            
            
            
        
    
Course Name
Specifications
Duration
Data Structures and Algorithms

                It includes pre-recorded premium
                
                    Videolectures&programmingquestions
                 for practice.
            
4 months
GFG Placement Programme

                This course helps students to prepare
                for the Recruitment drive.
            
3 months

  

输出：

注意：请注意两个属性的结果之间的差异。 word-wrap 属性将单词换行，而 word-break 属性继续遵循流程并在任何适当的字符处换行。