css文字伸缩效果

最新推荐文章于 2024-05-20 10:28:29 发布

chenThreeMetals

最新推荐文章于 2024-05-20 10:28:29 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/chenThreeMetals/article/details/123666519

css 专栏收录该内容

3 篇文章

订阅专栏

效果图：没有录屏分了三张图片展示
默认无省略效果
效果1
效果2

/*父元素使用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>