css 超出长度显示省略号 text-overflow: ellipsis;

最新推荐文章于 2025-06-24 09:47:52 发布

原创最新推荐文章于 2025-06-24 09:47:52 发布 · 528 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端专栏收录该内容

14 篇文章

订阅专栏

本文详细解析了如何使用CSS属性实现文本溢出时以省略号显示的效果，重点介绍了overflow、white-space、text-overflow及width属性的配合使用，并强调了display属性对于效果呈现的重要性。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.cla1{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 50px;
			}
			
			.inline-block{
				display: inline-block;
			}
			
			.block{
				display: block;
			}
		</style>
	</head>
	<body>
		<span class="cla1">span, no ellipsis</span>
		<br />
		<span class="cla1 inline-block">inline-block ok</span>
		<span class="cla1 block">block okokokok</span>
		<p class="cla1">p, default is block</p>
		<table>
			<tbody>
				<tr><td class="cla1">table-cell</td></tr>
			</tbody>
		</table>
		
		<table>
			<tbody>
				<tr><td class="cla1 block">table's block, ok</td></tr>
			</tbody>
		</table>
	</body>
</html>