html如何实现让超出的内容显示为省略号

最新推荐文章于 2025-06-10 12:41:12 发布

web_callBack

最新推荐文章于 2025-06-10 12:41:12 发布

阅读量1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/web_callBack/article/details/70233759

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用CSS实现文本超出长度时用省略号显示的效果，并提供了针对普通文本及表格布局的具体实现方法。

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

对于非表格的内容采用如下方法

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文字超出长度用省略号显示</title>
	<style type="text/css">
		p{
			width:10em;/*保证文字不会被半汉字截断,显示10个文字*/
			overflow:hidden;/*超出长度的文字隐藏*/
			text-overflow:ellipsis;/*文字隐藏以后添加省略号*/
			white-space:nowrap;/*强制不换行*/
			border:1px solid red;
		}
	</style>
</head>
<body>
<p title="我是中国人，这是一个很骄傲的称呼">我是中国人，这是一个很骄傲的称呼</p>
</body>
</html>

对于表格则需提前设置表格的布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文字超出长度用省略号显示</title>
	<style type="text/css">
		table{
			table-layout: fixed;/*只有定义表格的算法为fixed,th才有效果*/
			border-collapse: collapse;/*边框合并模式*/
		}
		table tr th{
			overflow:hidden;/*超出的文字隐藏*/
			text-overflow:ellipsis;/*文字超出后,显示省略号*/
			width:100%;
			white-space:nowrap;/*文字不换行*/
			word-break:keep-all;/*文字不换行*/
		}
	</style>
</head>
<body>
<table width="300" border="1">
	<tr>
		<th title="年度统计数据">年度统计数据</th>
		<th title="季度统计数据">季度统计数据</th>
		<th title="月份统计数据">月份统计数据</th>
	</tr>
	<tr>
		<td>3000</td>
		<td>2000</td>
		<td>1000</td>
	</tr>
</table>
</body>
</html>