flex布局实现左侧文字溢出省略右侧文字自适应布局-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

flex布局实现左侧文字溢出省略右侧文字自适应布局

admin • 2021-12-31 02:36:54 • 前端 • 阅读461
[导读]：flex 布局实现左侧文字溢出省略右侧文字自适应布局实现左侧文字溢出省略右侧文字自适应 主要介绍了 flex 布局实现左侧文字溢出省略右侧文字自适应的相关资料，小编觉得挺不错的，现在分享给大家， 也给大家做个参考。一起跟...
flex布局实现左侧文字溢出省略右侧文字自适应布局实现左侧文字溢出省略右侧文字自适应
主要介绍了flex布局实现左侧文字溢出省略右侧文字自适应的相关资料，小编觉得挺不错的，现在分享给大家，
也给大家做个参考。一起跟随小编过来看看吧
想要实现一个左侧文字可以根据文字长短自动调整宽度，当一行显示不下时，不挤压右侧文字空间，左侧文字溢出省略。同理
当右侧文字变长的时候，右侧文字全显示，左侧文字被挤压后溢出省略的效果。我说的可能不是很清楚，让我们看看效果图
吧。
1.右侧文字是多少就是多宽，左侧默认占据剩余的所有空间。
2.右侧文字是多少就是多宽，和1一样。左侧文字很长很长溢出省略。
3.左侧文字和2一样，右侧文字给他加了两个right。
下面上样式：
.footer {
width: 300px;
height: 20px;
display: flex;
overflow: hidden;
}
.left {
background: #3cc8b4;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 50px;
}
.right {
background: #9bc;
max-width: 250px;
}
.right-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
leftleftleftleftleftleftleftleftleftleftleftleftleft
rightrightrightrightrightrightrightrightright
代码中多加了max-width、min-width和叫right-ellipsis的div。来达到如下效果：
大家根据需要可以实现不同需求的效果了。设计需求总结：左侧宽度自动增长，右侧宽度自动增长并且不可溢出省略。当左侧
文字长度超出的时候，左侧文字溢出省略。

本文来自E先生的博客，如若转载，请注明出处：https://www.javajz.cn

flex布局,文字溢出,自适应
打赏 微信扫一扫微信扫一扫
admin
Vue首页加载过慢 解决方案. 已完成部署
« 上一篇
弹性Flex布局 深入理解，简单易懂
下一篇 »

相关推荐

留言区

联系人：
手   机：
内   容：
验证码：

历史留言

鲁ICP备20021488号
欢迎加Easy的QQ