入门 CSS 悬停或焦点时截断展开-css教程-PHP中文网

首页

web前端

css教程

入门 CSS 悬停或焦点时截断展开

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 25, 2023 pm 09:45 PM

入门 CSS 悬停或焦点时截断展开

文本显示是网页设计中的一个重要因素，它影响用户体验和网站的可读性。如果您的文本以有组织的方式正确显示，用户将很容易理解它，从而被吸引到您的网站。然而，有时，对于网页中的指定空间来说，文本可能太长。为了正确显示该文本，我们使用 truncate 方法。 Primer CSS 提供了这种方法，您不仅可以截断文本，还可以通过悬停或焦点效果扩展文本。在本文中，我们将讨论这是如何工作的以及使我们能够这样做的类。

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 - 用于在悬停或聚焦时展开截断的文本。

示例

在此示例中，我们使用预定义的框类将 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 id="Primer-CSS-Truncate-Expand-on-hover-or-focus-state"> 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 id="Primer-CSS-Truncate-Expand-on-hover-or-focus-state"> 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>