Primer CSS 截断文本在悬停或聚焦时展开

cssweb developmentfront end technology更新于 2024/5/12 13:00:17

文本显示是网页设计中的一个重要因素，它会影响用户体验和网站的可读性。如果您的文本以有序的方式正确显示，用户将能够轻松理解，从而被您的网站吸引。然而，有时文本可能过长，超出了网页的特定空间。为了正确显示这些文本，我们使用了截断方法。Primer CSS 提供了此方法，您不仅可以截断文本，还可以在悬停或聚焦时展开文本。在本文中，我们将讨论该方法的工作原理以及支持该方法的类。

Primer CSS

Primer CSS 是一个强大的开源 CSS 框架，它使开发人员能够为 Web 应用程序和网站创建一致且专业的前端。它由 GitHub 设计系统设计。它提供了一套功能丰富的内置组件，例如排版、按钮、警报、截断、菜单、导航等。它易于使用，节省大量时间。此外，它还提供了详尽的文档，方便初学者随时上手。它预定义了用于截断网页中溢出文本的类。

在使用 Primer CSS 中的任何类之前，我们必须通过 npm 安装它 -

npm install --save @primer/css

或使用 HTML 代码中的 CDN 链接 -

<link href= "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel= "stylesheet" />

悬停或聚焦状态下截断/展开

Primer CSS 内置了一些类，用于在悬停或聚焦状态下展开截断的文本。这些类如下:-

Truncate-text - 用于截断任何文本
Truncate-text--expandable - 用于在悬停或聚焦状态下展开截断的文本。

示例

在此示例中，我们使用预定义的 box 类将 div 元素转换为可调整大小的框。这里，p-1 是类的简写形式，表示在框的所有边上添加 4px(0.25 rem)的填充。

接下来，我们创建 style 属性，用于为框添加所需的样式。我们将 resize 属性的值设置为 horizontal，以便用户只需从右上角拖动即可水平调整框的大小。为了向元素添加水平滚动条，我们使用了 "overflow: scroll" 属性。使用水平滚动条可以让用户在水平滚动文本时看到隐藏的内容。

接下来，我们创建了一个包含锚标签的元素，这些锚标签将被截断以适应框的大小。 Truncate-text 是为截断锚标记内的文本而定义的类，而 Truncate-text--expandable 类是内置的，使用户能够在鼠标悬停或处于聚焦状态时展开截断的文本。

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<body>
   <h1 style="margin: 10px"> Primer CSS Truncate Expand on hover or focus state </h1>
   <p style="margin: 10px"> Following we have different truncated text which expands on hovering. </p>
   <br>
   <div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 10px">
      <div class="Truncate">
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailwind NextJs Typescript Java ExpressJs Vue.Js Laravel </a>
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
      </div>
   </div>
</body>
</html>

示例

在此示例中，我们添加了截断文本，该文本在悬停或聚焦于 div 元素内时可扩展。

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<body>
   <h1 style="margin: 10px"> Primer CSS Truncate Expand on hover or focus state </h1>
   <p style="margin: 15px"> Following we have different truncated text which expands on hovering. </p>
   <br>
   <div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 15px">
      <div class="Truncate">
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
      </div>
   </div>
</body>
</html>