css - Vuetify v-btn 文本行为

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: normal;”一样
3. 按钮的宽度保持固定，占据列的整个宽度，因为 'block' 属性应该导致。

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

可以测试一下here .

Answer 1

试试这个:

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

和:

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