css自动隐藏内容，并使用‘...’代替

最新推荐文章于 2024-03-07 16:27:41 发布

shidaping

最新推荐文章于 2024-03-07 16:27:41 发布

阅读量914

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/shidaping/article/details/49409795

web前端专栏收录该内容

49 篇文章

订阅专栏

本文介绍如何使用CSS实现文本溢出省略效果，通过设置overflow、text-overflow及white-space属性来达到目的。并提供了在div和table元素中实现该效果的具体代码实例。

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

我们经常会碰到这样一个问题，为了美观，我们需要将一些文字固定在一定的宽度内，并使用...结尾。其实css中自带这一功能。

先来看一个例子。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<style>
	#div1{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:200px;
	}

</style>


</head>

<body>
<div id='div1'>
	中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而成国家和朝代，后历经多次演变和朝代更迭，持续时间较长的朝代有夏、商、周、汉、晋、唐、宋、元、明、清等。中原王朝历史上不断与北方游牧民族交往、征战，众多民族融合成为中华民族。20世纪初辛亥革命后，中国的君主政体退出历史舞台，取而代之的是共和政体。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。中国有着多彩的民俗文化，传统艺术形式有诗词、戏曲、书法和国画等，春节、元宵、清明、端午、中秋、重阳等是中国重要的传统节日。
</div>

</body>

显示结果：

好像就是我们需要的效果。注意overflow:hidden是不能省略。但是div的宽度必须是固定的。在table中就不行了。因为很可能td宽度是不能确定的。再看一个例子。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<style>
	#div1{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:200px;
	}

</style>


</head>

<body>
<table style='width:400px;'>
	<tr >
		<td style='width:100px;'>
			left
		</td>
		<td id='div1'>
			中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而成国家和朝代，后历经多次演变和朝代更迭，持续时间较长的朝代有夏、商、周、汉、晋、唐、宋、元、明、清等。中原王朝历史上不断与北方游牧民族交往、征战，众多民族融合成为中华民族。20世纪初辛亥革命后，中国的君主政体退出历史舞台，取而代之的是共和政体。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。中国有着多彩的民俗文化，传统艺术形式有诗词、戏曲、书法和国画等，春节、元宵、清明、端午、中秋、重阳等是中国重要的传统节日。
		</td>
		<td style='width:100px;'>
			right
		</td>

	<tr>
</table>
</body>

此时你会发现之前的方法行不通了。其实这有一个巧妙的解决办法，请再看

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<style>
	#div1{
		position: relative;
	}
	#div2{
		position: absolute;;
		left:0;
		top:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:100%;
    height:20px;
	}

</style>


</head>

<body>
<table style='width:400px;'>
	<tr >
		<td style='width:100px;'>
			left
		</td>
		<td id='div1'>
			<div id='div2'>
			中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而成国家和朝代，后历经多次演变和朝代更迭，持续时间较长的朝代有夏、商、周、汉、晋、唐、宋、元、明、清等。中原王朝历史上不断与北方游牧民族交往、征战，众多民族融合成为中华民族。20世纪初辛亥革命后，中国的君主政体退出历史舞台，取而代之的是共和政体。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。中国有着多彩的民俗文化，传统艺术形式有诗词、戏曲、书法和国画等，春节、元宵、清明、端午、中秋、重阳等是中国重要的传统节日。
			</div>
		</td>
		<td style='width:100px;'>
			right
		</td>

	<tr>
</table>
</body>

在这里，我们把div1设为position:relatvie; 然后把div2设为position:absolute;width:100%; OK了。看官请试试看吧。