Comportement du texte Vuetify v-btn

Question

J'ai l'ensemble de boutons suivant :

<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>

Dans cet exemple, le texte est codé en dur mais je récupère en fait le texte de l'API. Sa longueur est variable et je n'ai aucun moyen de la connaître à l'avance. J'ai besoin de :

1. Le texte ne déborde jamais de l'espace du bouton comme dans le bouton 2.
2. Laissez le texte du bouton utiliser la ligne dont il a besoin. 1,2,10...dépend de sa longueur. Développez toujours verticalement avec des sauts de ligne, cela accordera à la propriété CSS "word-break: normal;"
La largeur du bouton reste fixe, occupant toute la largeur de la colonne, comme le provoque l'attribut "block".

Tout cela doit être implémenté dans les vues de bureau, de tablette et de mobile.

Vous pouvez le tester ici.

Answer 1

Essayez ceci :

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

et :

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