如何仅在悬停时不显示框列表高度的情况下显示截断的文本?

我的vue组件脚本如下:

My script of vue component like this :

<template>
  ...
    <b-card-group deck v-for="row in formattedClubs">
        <b-card  v-for="club in row"
                img-src="http://placehold.it/130?text=No-image"
                img-alt="Img"
                img-top>
            <h4 class="card-title" 
                @mouseenter="club.truncate = false"
                @mouseleave="club.truncate = true">
                <template v-if="club.truncate">{{trucateText(club.description)}}</template>
                <template v-else>{{club.description}}</template>
            </h4>
            <p class="card-text">
                {{club.price}}
            </p>
            <p class="card-text">
                {{club.country}}
            </p>
            <div slot="footer">
                <b-btn variant="primary" block>Add</b-btn>
            </div>
        </b-card>
    </b-card-group>
  ...
</template>

<script>
export default {
  data: function () {
    return {
      clubs: [
          {id:1, description:'chelsea is the best club in the world and chelsea has a great player', price:1000, country:'england'},
          {id:2, description:'liverpool has salah', price:900, country:'england'},
          {id:3, description:'mu fans', price:800, country:'england'},
          {id:4, description:'city has a great coach. Thas is guardiola', price:700, country:'england'},
          {id:5, description:'arsenal player', price:600, country:'england'},
          {id:6, description:'tottenham in london', price:500, country:'england'},
          {id:7, description:'juventus stadium', price:400, country:'italy'},
          {id:8, description:'madrid sell ronaldo', price:300, country:'spain'},
          {id:9, description:'barcelona in the spain', price:200, country:'spain'},
          {id:10, description:'psg buys neymar at a fantastic price', price:100, country:'france'}
      ]
    }
  },
  computed: {
      formattedClubs() {
          return this.clubs.reduce((c, n, i) => {
              if (i % 4 === 0) c.push([]);
              c[c.length - 1].push(n);
              this.$set(n, 'truncate', true); 
              return c;
          }, []);
      }
  },
  methods: {
      trucateText (value) {
          const length = 30;
          return value.length <= length ? value : value.substring(0, length) + "...";
      }
  }
}
</script>

如果执行了脚本，则视图如下:

If the script executed, the view like this :

如果我将描述悬停，则结果如下:

If I hover the description, the result like this :

它会改变箱子列表的高度

It change height of box list

我该如何解决这个问题?

How can I solve this problem?

我想要这样的视图: