資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在表格單元格中使用 text-overflow？
CSS 中的 text-overflow 屬性用於處理網頁上溢位的文字。此屬性幫助我們以特定方式顯示溢位的文字。text-overflow 屬性與另外兩個具有固定值的屬性一起使用，以特定方式顯示溢位的文字，這兩個屬性分別是 white-space: nowrap; 和 overflow: hidden; 以及給定的值。一旦在元素上設定了這些屬性，我們就可以使用 text-overflow 屬性的不同值，如下所示：
clip - 這是此屬性的預設值，其中溢位的文字被裁剪且不可見或無法訪問。
ellipsis - 此屬性在裁剪文字後設置 3 個省略號 (...) 以顯示文字已隱藏。
string - 此屬性將呈現給定的字串以表示裁剪的文字。
initial - 它會將屬性的值設定為其預設值。
inherit - 此屬性將從其父元素繼承值。
語法
以下語法將顯示如何使用 text-overflow 屬性和其他屬性以特定方式顯示文字：
elementSelector {
white-space: nowrap;
overflow: hidden;
text-overflow: clip | ellipsis | string | initial | inherit;
}
現在讓我們看看在表格單元格內使用 text-overflow 屬性並嘗試以特定方式顯示錶格單元格的溢位文字。
步驟
步驟 1 - 在第一步中，我們必須在我們將使用 text-overflow 屬性以特定方式顯示文字的單元格上定義一個 <table> 元素。
步驟 2 - 在下一步中，我們將為表格的每一列分配類，以檢視 text-overflow 屬性與不同值的用法。即 ellipsis、clip 和 string。
步驟 3 - 在最後一步中，我們將使用上一步中分配的類來應用 text-overflow CSS 及其他屬性。
示例
以下示例將說明如何在表格單元格中使用 text-overflow 屬性以特殊方式隱藏和顯示文字：
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td {
border: 1px solid green;
}
table {
width: 100%;
}
.text-ellipsis{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-clipped{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
.text-string{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: string;
}
</style>
</head>
<body>
<h2>Use text-overflow in a table cell</h2>
<p><b>The text in below table cells is shown in different ways using the text-overflow property. </b> </p>
<br/>
<table>
<thead>
<tr>
<th> Ellipsis Text</th>
<th> Clipped Text </th>
<th> String Text </th>
</tr>
</thead>
<tbody>
<tr>
<td class = "text-ellipsis">
Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.
</td>
<td class = "text-clipped">
Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.
</td>
<td class = "text-string">
Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.
</td>
</tr>
</tbody>
</table>
</body>
</html>
在此示例中，我們使用 text-overflow 屬性的不同 CSS 屬性值在表格的每一列中顯示了溢位的文字。我們使用 ellipsis、clip 和 string 值以特定方式顯示文字。
現在讓我們再看一個程式碼示例，在該示例中，我們將顯示錶格列的完整文字，使用者將滑鼠懸停在該特定列上。
演算法
此示例的演算法與上一個示例類似。您只需要在 style 標籤中新增懸停 CSS，它將在懸停時顯示列的文字。
示例
以下示例將說明上述演算法中的更改，以顯示滑鼠懸停在該列上的列文字：
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td {
border: 1px solid green;
}
table {
width: 100%;
}
.text-ellipsis{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-ellipsis:hover{
overflow: visible;
white-space: normal;
}
.text-clipped{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
.text-clipped:hover{
overflow: visible;
white-space: normal;
}
.text-string{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: string;
}
.text-string:hover{
overflow: visible;
white-space: normal;
}
</style>
</head>
<body>
<h2>Use text-overflow in a table cell</h2>
<p><b>The text in below table cells is shown in different ways using the text-overflow property. </b> </p>
<br/>
<table>
<thead>
<tr>
<th> Ellipsis Text</th>
<th> Clipped Text </th>
<th> String Text </th>
</tr>
</thead>
<tbody>
<tr>
<td class = "text-ellipsis">
Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.
</td>
<td class = "text-clipped">
Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.
</td>
<td class = "text-string">
Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.
</td>
</tr>
</tbody>
</table>
</body>
</html>
在上面的示例中，我們使用了與上一個示例中相同的邏輯以不同的方式顯示溢位的文字。但是，在此示例中，我們添加了另一個邏輯，以使用 CSS 中的懸停偽選擇器在滑鼠懸停時顯示列的內容。
結論
在本文中，我們學習瞭如何在表格單元格中使用 text-overflow 屬性以不同的方式顯示文字。我們透過藉助程式碼示例實際實現它來討論它。我們還看到了一個示例，其中每一列的完整文字都將在滑鼠懸停在其上時可見。
2K+ 閱讀量
