解决列表某项文字过度过多 需要自适应撑开高度展示 其他项目按照行高居中

解决列表某项文字过度过多 需要自适应撑开高度展示 其他项目按照行高居中

以下代码可直接复制：
两种方法：分别是方法1：bfc配合浮动撑高 其他项目子绝父相 方法二：第一项也是相对定位（不推荐）

<template>
  <div class="far_box">
    <ul>
      <li v-for="item in arr" :key="item.id">
        <span class="s1">{{ item.name }}</span>
        <span class="s2">{{ item.age }}</span>
        <span class="s3">操作</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [
        { id: 1, name: '自己家的味道金额为搭配我陪of额欧朋foeofo违法未of额威锋网颇尔我我呃呃哦哦哦颇尔第五批东阿王', age: 10 },
        { id: 2, name: '自己家的味道金额为搭配我陪of额欧朋foeofo违法未qwewqewqoeowq哦哦我哦群殴我看偶尔为空饿哦千万可开启王鹏空气我看of额威锋网颇尔我我呃呃哦哦哦颇尔第五批东阿王', age: 7 },
        { id: 3, name: '自己家的味道', age: 111111112 }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.far_box {
  ul {
    width: 500px;
    border: 1px solid #1fff;
    li {
      overflow: hidden; //设置bfc 可以解决 s1浮动时候 撑起高度  这样s1和s2才能在一定高度下居中
      position: relative;
      border-bottom: 1px solid #ccc;

      span {
        display: inline-block;
      }
      .s1 {
        width: 50%;
        word-break: break-all;
        float: left; //配合bfc撑起高度     ---   如果这里不写fl和上方的overflow  也可直接使用方法2：相对定位relative撑高及位移（既下方注释）  但不建议方法2

        // position: relative;
        // left: -30%;
      }
      .s2 {
        width: 20%;
        position: absolute;
        left: 55%;
        top: 50%;
        transform: translate(0, -50%);
      }
      .s3 {
        width: 10%;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
      }
    }
    li:last-child {
      border-bottom: none;
    }
  }
}
</style>