資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學Primer CSS 自定義最大寬度截斷
在 Web 開發專案中，開發者經常會遇到需要在指定空間內顯示文字的情況，原因有很多，例如客戶需求、整體外觀、資源有限等等。CSS 中的 `truncate` 屬性是一個有效的特性，可以解決這個問題。
它允許開發者顯示單行文字，並用省略號截斷溢位的文字。但是，根據具體情況，可能需要自定義截斷文字的最大寬度。在這篇文章中，我們將討論如何使用 Primer CSS（一個由 GitHub 設計系統設計的流行開源 CSS 框架）來自定義最大寬度。
截斷是什麼意思？
在 Web 設計中，`truncate` 是 CSS `text-overflow` 屬性的一個值。處理文字時，經常會遇到容器空間不足以容納所有文字的情況。這部分文字被稱為溢位文字。它使我們能夠顯示單行文字，然後用省略號截斷其餘部分。
在 CSS 中，要使用“truncate”，需要執行以下步驟：
將 `white-space` 屬性設定為 `nowrap`
將 `overflow` 屬性設定為 `hidden`
將 `text-overflow` 屬性設定為 `ellipsis`
示例
<html>
<head>
<style>
div {
width: 77%;
height: 30px;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </div>
</body>
</html>
為了避免編寫過多程式碼，可以使用 Primer CSS。Primer CSS 內建了截斷元件，併為此預定義了類。
在使用 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 提供了預定義的類，用於截斷網站上溢位的文字。
示例
在這個例子中，我們使用預定義的 `box` 類將一個 div 元素轉換為一個可調整大小的框。這裡，`p-1` 是一個類速記，用於在框的四側新增 4px (0.25 rem) 的填充。
接下來，我們有一個 `style` 屬性，用於向框新增所需的樣式。我們將 `resize` 屬性的值設定為 `horizontal`，以便使用者可以透過從右角拖動來水平調整框的大小。為了向元素新增水平捲軸，我們使用了 `overflow: scroll` 屬性。使用水平捲軸將使使用者能夠在水平滾動文字時檢視隱藏的內容。
然後，我們使用 Primer CSS 中的預定義類顯示具有不同最大寬度的不同截斷文字。
<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 Custom Max Width </h1>
<p style="margin: 10px"> Following we have different truncated text with customized maximum widths. </p>
<br>
<div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 10px">
<div class="Truncate">
<span class="Truncate-text Truncate-text--expandable" style="max-width: 460px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
</div>
<br>
<div class="Truncate">
<span class="Truncate-text Truncate-text--expandable" style="max-width: 340px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
</div>
<br>
<div class="Truncate">
<span class="Truncate-text Truncate-text--expandable" style="max-width: 280px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
</div>
<br>
<div class="Truncate">
<span class="Truncate-text Truncate-text--expandable" style="max-width: 180px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
</div>
<br>
<div class="Truncate">
<span class="Truncate-text Truncate-text--expandable" style="max-width: 80px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
</div>
</div>
</body>
</html>
結論
在內容溢位的情況下自定義顯示文字的最大寬度是一個良好的實踐，它可以幫助開發者控制文字在網站上有限空間內的顯示。按照本文中討論的方法，您將能夠建立視覺上更具吸引力的網站。我們還可以將截斷方法用於卡片設計。這使得您的內容更易於閱讀和使用者友好，同時您需要顯示較長的標題、標題、卡片描述等。
88 次瀏覽
