将多余文字以省略号显示

最新推荐文章于 2023-06-10 15:42:04 发布

L_jin_c

最新推荐文章于 2023-06-10 15:42:04 发布

阅读量946

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS和CSS3

本文链接：https://blog.youkuaiyun.com/L_jin_c/article/details/80916491

CSS和CSS3 专栏收录该内容

1 篇文章

订阅专栏

怎么样将多余文字以省略号显示？

在这里会用到CSS属性：white-space；CSS3的属性：text-overflow。

下面用实际例子说明一下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title></title> 
	<style>
	p
	{
		width: 400px;
		/*white-space:nowrap;
		overflow: hidden;
		text-overflow: ellipsis;*/
	}
	</style>
</head>
<body>
	<p>
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
	</p>

</body>
</html>

当代码是这样的时候，效果如下：

再看下面这个，加上white-space属性、overflow属性和text-overflow属性后就会达到我们想要的效果。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title></title> 
	<style>
	p
	{
		width: 400px;
		white-space:nowrap; 
		/*规定文本不会换行,直到遇到<br>标签*/
		overflow: hidden;  
		/*隐藏超出的部分*/ 
		text-overflow: ellipsis;  
		/*将超出的文本以省略号的形式显示*/
	}
	</style>
</head>
<body>
	<p>
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
		This is some text. This is some text. This is some text.
	</p>

</body>
</html>

效果如下：