table中，文字一行，溢出隐藏省略号写法

最新推荐文章于 2023-01-02 21:27:42 发布

熊叁(san)

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量1.9k

点赞数 1

分类专栏：前端笔记

本文链接：https://blog.csdn.net/littlebearGreat/article/details/78413762

版权

前端笔记专栏收录该内容

126 篇文章

订阅专栏

table中文字一行溢出隐藏无效的解决办法。

平时，我们给标签固定宽度，再加上如下属性，即可实现文字一行、溢出隐藏省略号的效果

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

在table中，要实现这一效果也是这样的，今天我第一次写的时候竟然无效，想了一下，解决办法如下：

思路：

1. 我们一定要遵循属性使用的条件：标签固定宽度、再加上三个属性设置

2. 在table中，表格一般都是自适应的，我们要固定宽度才能实现这个效果。

方法：

table标签必须有确定的宽度：table的width必须有固定的值

th或td必须有固定的宽度：给table设置 table-layout:fixed;（固定列宽，当然我们在这个前提下也可以随意设置每列的宽）

再使用三个属性，即可达到目标。

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>表格省略号</title>
	<style>
		table{
			border-collapse: collapse;
			width: 600px;
			table-layout: fixed;
		}
		th,td{
			border: 1px solid #333;
		}
		td{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th class="name">姓名</th>
				<th class="sex">性别</th>
				<th class="age">年龄</th>
				<th class="introduction">简介</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>熊大</td>
				<td>男</td>
				<td>8</td>
				<td>熊大是光头强中的一个角色熊大是光头强中的一个角色熊大是光头强中的一个角色</td>
			</tr>
			<tr>
				<td>熊二</td>
				<td>男</td>
				<td>6</td>
				<td>熊二是光头强中的一个角色熊二是光头强中的一个角色熊二是光头强中的一个角色</td>
			</tr>
		</tbody>
	</table>
</body>
</html>