入門 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>