資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在表格單元格中使用 CSS 省略號？
在處理表格中的長文字時，確保文字不會溢位並破壞佈局至關重要。CSS 提供瞭解決方案，可以為超過單元格寬度的文字新增省略號 (...)，從而保持 UI 的整潔和可讀性。本文探討了兩種方法：使用 display 屬性和 table-layout 屬性。
在表格單元格中使用 CSS 省略號的方法
使用 display 屬性
可以使用 display 屬性 將表格單元格視為塊級或內聯塊級元素，從而獲得更多樣式控制。此方法包括為單元格設定固定寬度，隱藏溢位內容，並使用 text-overflow: ellipsis 屬性為截斷的文字顯示省略號。
方法步驟
- 步驟 1：將元素的 display 屬性更改為 block 或 inline-block，以將表格單元格視為塊級元素。
- 步驟 2：為單元格設定固定寬度。
- 步驟 3：使用 text-overflow: ellipsis 確保截斷的文字以省略號結尾。
- 步驟 4：新增 overflow: hidden 和 white-space: nowrap; 來管理文字的換行和可見性。
示例程式碼
在此示例中，表格單元格截斷文字並在溢位內容後顯示省略號。
<!DOCTYPE html>
<html>
<head>
<title>Ellipsis Using CSS Display</title>
<style>
td {
display: block;
border: 2px solid #000;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>This is a long text that will be truncated</td>
</tr>
</tbody>
</table>
</body>
</html>
輸出
使用 table-layout 屬性
可以使用 table-layout: fixed; 屬性為表格列設定一致的佈局。透過將其與表格和表格單元格的固定寬度結合使用，我們可以控制文字在超過定義寬度時的行為，對截斷的內容顯示省略號。
方法步驟
- 步驟 1：將 table-layout: fixed; 應用於元素。
- 步驟 2：為表格和單元格定義固定寬度。
- 步驟 3：為 <td> 元素使用 text-overflow: ellipsis、overflow: hidden 和 white-space: nowrap; 來處理溢位。
示例程式碼
<!DOCTYPE html>
<html>
<head>
<title>Ellipsis Using Table Layout</title>
<style>
table {
table-layout: fixed;
width: 100px;
}
td {
border: 2px solid #000;
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>This is another long text example</td>
</tr>
</tbody>
</table>
</body>
</html>
輸出
更新於: 2024-11-22
4 次檢視
廣告