css文字伸缩效果

效果图：没有录屏 分了三张图片展示

/*父元素使用flex布局 */
.div-flex{display: flex;justify-content: space-between;align-items: center;flex-direction: row;}
.left{flex:1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.right{padding-left: 40px;}

	<div class="div-flex" >
			<div class="left">
			  左左左左zuozuo 左左左左zuozuo 左左左左zuozuo 左左左左zuozuo
			</div>
			<div class="right">
				右右右yoyoyou
			</div>
	 </div>