📜  Primer CSS Truncate Expand on Hover 或 Focus

📅  最后修改于: 2022-05-13 01:56:39.747000             🧑  作者: Mango

Primer CSS Truncate Expand on Hover 或 Focus

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

Primer CSS提供了 Truncate,它用于长度大于现有容器的文本,用省略号缩短。 Primer CSS Truncate Expand on Hover or Focus用于在应用悬停或焦点状态时展开文本。在本文中,我们将讨论悬停或焦点上的截断扩展。

Primer CSS Truncate Expand on Hover 或 Focus Classes:

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

句法:

示例 1:下面是演示如何使用 Primer CSS Truncate Expand on Hover 或 Focus 使用para标记内的文本的示例。

HTML


  

     Primer CSS Truncate Expand on Hover or Focus     
    

  

    
        

GeeksforGeeks

        

Primer CSS Truncate Expand on Hover or Focus

                   
                               

                GeeksforGeeks is a Computer Science Portal               

                    

                GeeksforGeeks is a Computer Science Portal               

                    

                GeeksforGeeks is a Computer Science Portal               

               
        
    
  


HTML


  

     Primer CSS Truncate Expand on Hover or Focus     
    

  

    
        

GeeksforGeeks

        

Primer CSS Truncate Expand on Hover or Focus

                        
  


输出:

Primer CSS Truncate Expand on Hover 或 Focus

示例 2:下面是演示如何使用 Primer CSS Truncate Expand on Hover 或 Focus 使用标记内的文本的示例。

HTML



  

     Primer CSS Truncate Expand on Hover or Focus     
    

  

    
        

GeeksforGeeks

        

Primer CSS Truncate Expand on Hover or Focus

                        
  

输出:

Primer CSS Truncate Expand on Hover 或 Focus

参考: https ://primer.style/css/components/truncate