使用Primer CSS截断悬停或聚焦展开

文本显示是网页设计中的重要因素，影响用户体验和网站的可读性。如果您的文本以有组织的方式正确显示，用户将很容易理解并吸引到您的网站。然而，有时文本可能过长，不适合网页的指定空间。为了正确显示文本，我们使用截断方法。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.25rem）的内边距。

接下来，我们使用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>