首頁 > 文章 > web前端 > 入門 CSS 懸停或焦點時截斷展開

入門 CSS 懸停或焦點時截斷展開

WBOY轉載: 2023-08-25 21:45:02936瀏覽

入门 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 懸停或焦點時截斷展開的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：CSS3 提供的額外顏色屬性下一篇：CSS3 提供的額外顏色屬性

看更多