flex布局实现左侧文字溢出省略右侧文字自适应
发布时间：2019-02-01 16:13:08 作者：Runnnnn 
我要评论
我要评论这篇文章主要介绍了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;
}
<div class="footer">
<div class="left">
leftleftleftleftleftleftleftleftleftleftleftleftleft
</div>
<div class="right">
<div class="right-ellipsis">
rightrightrightrightrightrightrightrightright
</div>
</div>
</div>
代码中多加了max-width、min-width和叫right-ellipsis的div。来达到如下效果：
大家根据需要可以实现不同需求的效果了。设计需求总结：左侧宽度自动增长，右侧宽度自动增长并且不可溢出省略。当左侧文字长度超出的时候，左侧文字溢出省略。效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了css九宫格布局的五种方法，内容包括grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性这五种方法的实现，感兴趣的可以了解下2023-09-18- 在Web开发中，经常会遇到需要将元素水平和垂直居中的情况,今天，将为大家分享几种CSS方法，让你的元素轻松居中，让页面更美观吸引人，感兴趣的小伙伴可以自己动手试一试2023-09-08
- 相信大家在面试的时候也会经常碰到css实现元素居中的方法，下面我介绍6种方法给大家，欢迎大家评论区交流2023-09-07
最近需要做个换行的布局，本文主要介绍了flex布局中使用flex-wrap实现换行的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需2022-06-16CSS布局之浮动(float)和定位(position)属性的区别
今天看到有朋友留言问浮动和定位有什么区别，如何使用？今天找了篇文章，讲的比较通俗易懂，供大家参考2021-09-23
这篇文章主要介绍了css实现元素居中的N种方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了div水平布局两边对齐的三种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-01-21
这篇文章主要介绍了waterfall瀑布流布局+动态渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-01-19
这篇文章主要介绍了页面中有间隔的方格布局如何完美实现方法。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-11-27- 这篇文章主要介绍了css实现六种自适应两栏布局方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-10-28
最新评论