Vuetify kelakuan teks v-btn

Question

Saya mempunyai set butang berikut:

<template>
    <v-card
        color="secondary"
        elevation="6"
    >
        <v-card-title>
            <v-spacer></v-spacer>
            Three buttons
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
            <v-row>
                <v-col cols="12" sm="4" v-for="button in buttons" :key="button.id">
                    <v-btn color="primary" x-large block>
                        <span style="word-break: normal !important;">{{button.text}}</span>
                    </v-btn>
                </v-col>
            </v-row>
        </v-card-text>
    </v-card>
</template>
<script>
export default {
    data () {
        return {
            //This is not a production code. The button texts are obtained via api and their length is variable
            buttons: [
                {id:1, text: "I'm a button"},
                {id:2, text: "I'm another button. Bla, bla, bla, bla"},
                {id:3, text: "I'm a button too"}
            ]
        }
    },
}
</script>

Dalam contoh ini teks dikodkan keras tetapi saya sebenarnya mendapat teks daripada API. Panjangnya berubah-ubah dan saya tidak mempunyai cara untuk mengetahuinya terlebih dahulu. Saya perlukan:

1. Teks tidak pernah melimpahi ruang butang seperti dalam Butang 2.
2. Biarkan teks butang menggunakan baris yang diperlukan. 1,2,10...bergantung pada panjangnya. Sentiasa berkembang secara menegak dengan pemisah baris, ini akan memberikan sifat css "patah kata: normal;"
3. Lebar butang kekal tetap, mengambil keseluruhan lebar lajur, kerana disebabkan oleh atribut "blok".

Semua ini mesti dilaksanakan dalam paparan desktop, tablet dan mudah alih.

Anda boleh mengujinya di sini.

Answer 1

Cuba ini:

.v-btn__content {
  white-space: normal;
  flex: auto;
}

dan:

.v-btn {
  min-height: 52px;
  height: 100% !important;
}