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

当我们拉伸网页的时候，如果设置了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;
}