文字溢出显示省略号

最新推荐文章于 2023-07-03 15:55:35 发布

原创最新推荐文章于 2023-07-03 15:55:35 发布 · 7.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#文字溢出显示省略号

css 同时被 2 个专栏收录

7 篇文章

订阅专栏

复习

7 篇文章

订阅专栏

如果我们有时文字必须要在一行显示，文字的容器宽度已经确定（比如文章标题链接）字数太多的情况下难免会溢出，但是如何让使用者知道它是溢出了，不是缺失了呢，这时候省略号就有大作用了，那么如何设置呢？请看代码

<head>
		<meta charset="utf-8" />
		<title>溢出显示省略号</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 20px;
				/*以下三句缺一不可*/
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div>
			这里的字太多了，不想换行显示，溢出之后想让人们知道后面还有内容
		</div>
	</body>

显示的结果就像下图一样