文本超出部分隐藏（非块级元素）

最新推荐文章于 2025-02-25 11:49:18 发布

原创最新推荐文章于 2025-02-25 11:49:18 发布 · 640 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#超出部分隐藏 #文本隐藏

前端专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何使用CSS属性如overflow、display和line-height来解决表格单元格（TD）中文本溢出的问题，确保表格布局整洁美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看测试代码：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<style>
			#tr1{
				display:block;
				width:547px;
				height:33px;
				border-bottom:1px dashed #C9C9C9;
			}
			#td1{
				padding:0px;
				<!--display:inline-block;
				line-height:28px;
				overflow:hidden;-->
				vertical-align:top;
				width:476px;
				height:33px;
				font-size:14px;
			}
			#td2{
				padding:0px;
				<!--display:inline-block;-->
				vertical-align:top;
				width:66px;
				height:33px;
				font-size:14px;
				text-align:center;
				line-height:25px;
			}
			#a1{
				font-size:14px;
				text-decoration:none;
			}
		</style>
	</head>
	<body>
		<table>
			<tr id="tr1">
				<td id="td1">
					 · 
					<a id="a1">关于推荐我校2017年度宝钢教育奖优秀教师特等奖人选、优秀教师奖人选的公示</a>
				</td>
				<td id="td2">
					[18-09-04]
				</td>
			<tr>
		</table>
	</body>
</html>

效果图：

因为<td>标签中文字超出自动换行，导致这个tr的格式很不好看

我们的目的：<td>标签中文本超出部分隐

1.我首先尝试的是overflow:hidden属性.当我给<td id="td1">中加上overflow:hidden属性时，发现结果并未发生任何改变。

这是因为并未满足overflow:hidden溢出条件

overflow:hidden溢出条件：https://blog.youkuaiyun.com/csdn_zsdf/article/details/72871357

2.我选择用display属性将其视为块级元素。但是不用display:block，因为一个普通块独占一行。所以我使用display:inline-block属性，使之成为行内块元素，自动成行排列。但是一定要用vertical-align:top保持顶端对齐（默认对齐方式不为顶端对齐）。

3.使td成为块级元素后，给<td id="td1">中加上overflow:hidden属性.

此时效果：

此时的overflow属性是起了作用的！

若没有overflow属性，效果图：

4.我们使用line-height属性将td中文本下移(行高line-height，行高指的是文本行的基线间的距离，但是文本之间的空白距离不仅仅是行高决定的，同时也受字号的影响) 例如：我们加上line-height:28px;

效果图：

最终代码：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<style>
			#tr1{
				display:block;
				width:547px;
				height:33px;
				border-bottom:1px dashed #C9C9C9;
			}
			#td1{
				padding:0px;
				display:inline-block;
				overflow:hidden;
				vertical-align:top;
				width:476px;
				height:33px;
				font-size:14px;
				line-height:28px;
			}
			#td2{
				padding:0px;
				display:inline-block;
				vertical-align:top;
				width:66px;
				height:33px;
				font-size:14px;
				text-align:center;
				line-height:25px;
			}
			#a1{
				font-size:14px;
				text-decoration:none;
			}
		</style>
	</head>
	<body>
		<table>
			<tr id="tr1">
				<td id="td1">
					 · 
					<a id="a1">关于推荐我校2017年度宝钢教育奖优秀教师特等奖人选、优秀教师奖人选的公示</a>
				</td>
				<td id="td2">
					[18-09-04]
				</td>
			<tr>
		</table>
	</body>
</html>