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

本文介绍如何使用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>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值