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

百变鹏仔 4周前 (09-20) #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 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>

结论

在本文中，我们了解了如何在空间有限的情况下以视觉上吸引人的方式正确显示文本。我们使用截断方法，可以使用 Primer CSS 轻松完成。此外，创建可扩展的截断文本将允许用户在需要时访问信息，同时不会影响网站的整体外观。这使您的网站用户友好且专业。

文章推荐

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

CSS 入门

悬停或焦点状态时截断展开

示例

示例

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写