Vuetify v-btn text behavior

Question

我有以下一组按钮：

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

在此示例中，文本是硬编码的，但实际上我是从 API 获取文本的。它的长度是可变的，我无法事先知道。我需要：

1. 文本永远不会像按钮 2 中那样溢出按钮的空间。
2. 让按钮文本使用它需要的行。 1,2,10...取决于它的长度。 始终垂直增长并带有换行符，这将授予 css 属性“word-break：正常；”
3. 按钮的宽度保持固定，占据列的整个宽度，正如“block”属性所导致的那样。

所有这些都必须在桌面、平板电脑和移动视图中实现。

您可以在这里进行测试。

Answer 1

Try this:

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

and:

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