flex盒子子元素实现文本超出部分...

Posted 2021-10-09 zuank

日常开发的时候 有时候会遇到 在flex布局中 希望子元素自适应宽度 并且文本超出部分...
由于felx本身的属性限制，直接像下面这种写法是不生效的
`

<view style="display:flex">
 <view style="felx:1;overflow: hidden; white-space:  nowrap; text-overflow: ellipsis;">用户名</view>
 <view style="width:100px">编辑资料</view>
</view>

`

分享一种写法
`

<view style="display:flex">
    <view style="felx:1;display: contents;">
        <view style="width:100%;overflow: hidden; white-space:  nowrap; text-overflow: ellipsis;">用户名</view>
        </view>
    <view style="width:100px">编辑资料</view>
</view>

`