页面缩放时溢出的文字内容隐藏为省略号，应该如何实现？

最新推荐文章于 2022-11-04 21:05:21 发布

夏末_前端有意思

最新推荐文章于 2022-11-04 21:05:21 发布

阅读量1.2k

点赞数

分类专栏： css布局文章标签： css 宽度自适应

本文链接：https://blog.csdn.net/xiamocsdn/article/details/89945269

版权

css布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

当我们拉伸网页的时候，如果设置了div宽度自适应，并且希望被挤压的部分内容布局不变的同时，宽度不够的话会被隐藏起来，类似于这种：

实现这一效果的css代码：

(关键在于

#sidebar_left{
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
})这部分内容

html{
	font-size: 62.6%;
}
*{
	margin: 0;
	padding: 0;
	font-size: 1.6rem;
}
#container{
	position: relative;
	background-color: yellow;
}
#sidebar_left{
	position: absolute;
	top: 0;
	left: 0;
	width: 20vw;
	height: 100vh;
	background-color: lightgreen;
	font-size: 2rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
#mid{
	margin-left: 20vw;
	margin-right: 20vw;
	height: 100vh;
	background-color: lightblue;
}
#sidebar_right{
	position: absolute;
	top: 0;
	right: 0;
	width: 20vw;
	height: 100vh;
	background-color: pink;
}