Primer CSS 截断自定义最大宽度

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）基础的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。

Primer CSS提供了 Truncate，它用于长度大于现有容器的文本，用省略号缩短。 Primer CSS Truncate Custom Max Widths用于定义它所占用的任何元素的自定义宽度，即使有足够的可用空间。在本文中，我们将讨论 Primer CSS 自定义最大宽度。

Primer CSS 截断自定义最大宽度类：

• Truncate-text：该类用于定义截断的文本。
• Truncate-text-expandable：该类用于在应用悬停或焦点状态时将截断的文本扩展为完整。

句法：

  

    
            ......
    
  

示例 1：下面的示例演示了如何使用 Primer CSS Truncate Custom Max Widths 使用提到的不同内联最大宽度。

输出：

Primer CSS 截断自定义最大宽度

示例 2：下面是另一个示例，演示了如何使用 Primer CSS Truncate Custom Max Widths 使用提到的不同内联最大宽度。

HTML

 

       
    

 

    
        
 GeeksforGeeks 
        
 Primer CSS Truncate Custom max widths 
         
        

            

              
                GeeksforGeeks, It is a Computer Science portal for
                all the geeks across the globe
              
            


 
            

              
                GeeksforGeeks, It is a Computer Science portal for
                all the geeks across the globe
              
            


 
            

              
                GeeksforGeeks, It is a Computer Science portal for
                all the geeks across the globe
              
            
        
    

 

输出：

Primer CSS 截断自定义最大宽度

参考： https ://primer.style/css/components/truncate#custom-max-widths