数据结构
网络
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+ 阅读量
