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
HTML
Primer CSS Truncate Expand on Hover or Focus
GeeksforGeeks
Primer CSS Truncate Expand on Hover or Focus
输出:
![](https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/Primer_CSS_Truncate_Expand_on_Hover_or_Focus_0.gif)
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
输出:
![](https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/Primer_CSS_Truncate_Expand_on_Hover_or_Focus_1.gif)
Primer CSS Truncate Expand on Hover 或 Focus
参考: https ://primer.style/css/components/truncate