数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学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.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 轻松完成。此外，创建可展开的截断文本将允许用户根据需要访问信息，同时不会影响网站的整体外观。这使得您的网站更易于使用且更专业。
浏览量：337
