很多时候我们会遇到左右布局的需求,例如:

我们先来实现一个简单版的:

我们可以发现第二个的金额被挤下去了:

因此我们要将左边的文字控制一下,如果太长就省略号:

我们给右边的金额预留了一部分空间,然后给左边的文字300px,如果超过就会出现省略号,因此出现了下面的情况:

因为订单号比较长,然后空间不足,导致整个订单号数字都跑到下一行去了,如果左边的省略号长度可以自由控制就好了。就是如果金额比较长,那么左边宽度就小一点,如果金额比较短,左边空间就大一些。

上面就是长度自适应的省略,要完成这种长度自适应的省略号并不难,最常见的可以利用felx布局:

我们上面的自适应利用的不是flex布局,利用的是float中的一个浮动技巧,关键布局如下:

我们把一个普通的没有浮动的放在一个右浮动的左边,就会形成如下结构:

右边区域就是浮动元素,如果浮动元素越长,那么左边可用区域就越少,正是利用这个原理实现的长度自适应的省略号。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字