想要实现一个左侧文字可以根据文字长短自动调整宽度,当一行显示不下时,不挤压右侧文字空间,左侧文字溢出省略。同理当右侧文字变长的时候,右侧文字全显示,左侧文字被挤压后溢出省略的效果。我说的可能不是很清楚,让我们看看效果图吧。
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。来达到如下效果:
大家根据需要可以实现不同需求的效果了。设计需求总结:左侧宽度自动增长,右侧宽度自动增长并且不可溢出省略。当左侧文字长度超出的时候,左侧文字溢出省略。效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
题目: if (a == 1 a == 2 a == 3) { console.log(1); } ?在什么情况下会输出1?...
Kotlin 以其简洁的特性而闻名,而在我们的实践中,更加简洁就意味着更加高效。事...
手机浏览器在滚动当前页面(还可能是缩放页面)时,由于默认行为被阻止,导致页...
第一个知识点:表单的属性及总结 第二个知识点:H5新增的表单控件和属性以及总结...
背景 并发冲突问题 , 是日常开发中一个比较常见的问题。 不同用户在较短时间间...
原理:首先把input元素隐藏掉,然后用CSS设置label元素(其他元素也可以)的样式...
MDN地址: https://developer.mozilla.org/zh-CN/docs/Web/API/DeviceMotionEven...
transform: scale();缩放在IE浏览器下会有抖动 transform缩放在IE浏览器下会有抖...
内容区块是指将HTML页面按逻辑分割后的单位。对于页面网站来说,导航菜单、文章...
最近做一个刮刮卡,需要将文字在canvas中水平、垂直居中 wxml canvas type='2d' ...