Vuetify v-btn-Textverhalten

Question

Ich habe den folgenden Tastensatz:

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

In diesem Beispiel ist der Text fest codiert, aber ich erhalte den Text tatsächlich von der API. Seine Länge ist variabel und ich habe keine Möglichkeit, es im Voraus zu wissen. Ich brauche:

1. Der Text überschreitet nie den Platz der Schaltfläche wie in Schaltfläche 2.
2. Lassen Sie den Schaltflächentext die benötigte Zeile verwenden. 1,2,10...hängt von seiner Länge ab. Wachsen Sie immer vertikal mit Zeilenumbrüchen, dadurch wird die CSS-Eigenschaft „word-break: normal;“ gewährt
Die Breite der Schaltfläche bleibt fest und nimmt die gesamte Breite der Spalte ein, was durch das „Block“-Attribut verursacht wird.

All dies muss in Desktop-, Tablet- und Mobilansichten umgesetzt werden.

Hier können Sie es testen.

Answer 1

试试这个：

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

和：

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