移动端弹性布局实现?

Question

页面基础布局入下图:

想要实现:
选择完地址后,最多显示4位,超过显示... , 同时搜索框的宽度变窄,位置与搜索框的间距不变

如选择: 锡林郭勒盟
则展示: 锡林郭勒...

请问怎样实现比较好呢,我暂时没有想到...求大佬

Answer 1

多余的变成省略号CSS就能实现

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap

或者你用js实现也可以，超过4位截取一下然后后面拼一个...

搜索框的宽度你既然用了flex,直接在设置一下搜索框CSSflex:1,搜索框会自动填满剩余空间。

前面的选择的地址的宽度增加了，剩下的空间自然就少了，所以搜索框的宽度自然变窄