資料結構
網路
關係資料庫管理系統 (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
