I have the following set of buttons:

<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 this example texts are hardcode but really I'm getting that texts from an API. Its length is variable and I can't know it beforehand. I need:

1. The text never overflows the space of the button as it is happening in the button 2.
2. Let the button text use the lines it needs. 1,2,10 ... depending on the length of it. Always growing vertically and with a line break as would grant the css property 'word-break: normal;'
3. The width of the button remains fixed occupying the entire width of the column, as the 'block' property should cause.

All this must be fulfilled in desktop, tablet and mobile views.

You can test it here.

CodePudding user response：

Try this :

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

and:

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