css显示省略号

最新推荐文章于 2024-08-07 15:34:55 发布

keep789

最新推荐文章于 2024-08-07 15:34:55 发布

阅读量332

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/keep789/article/details/81744702

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

有时候，页面并不需要展示全部信息。或者展示全部信息会影响页面布局的时候，就需要将多余信息显示成省略号，主要css代码就四句：定宽、不换行、超出隐藏、显示省略号

width：1111px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis

//demo.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.one li{
				list-style: none;
				width: 220px;   /*定宽*/
				white-space: nowrap; /*不换行*/
				overflow: hidden;  /*超出部分隐藏*/
				text-overflow: ellipsis; /*显示省略号*/
			}
		</style>
	</head>
	<body>
		<ul class="one">
			<li>我多想这一刻不再冷静，我不能大声的哭给你听</li>
			<li>我多想这一刻不再冷静，我不能大声的哭给你听</li>
			<li>我多想这一刻不再冷静，我不能大声的哭给你听</li>
			<li>我多想这一刻不再冷静，我不能大声的哭给你听</li>
			<li>我多想这一刻不再冷静，我不能大声的哭给你听</li>
		</ul>
	</body>
</html>