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 中获取文本的。它的长度是可变的，我事先无法知道。我需要：

文本不会像按钮 2 中那样溢出按钮的 space。
让按钮文本使用它需要的行。 1,2,10 ...取决于它的长度。始终垂直增长并带有换行符，以授予 css 属性 'word-break: normal;'
按钮的宽度保持固定，占据整个列的宽度，正如 'block' 属性应该引起的那样。

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

你可以测试一下here。

Answer 1

试试这个：

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

和：

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

Vuetify v-btn 文本行为

Vuetify v-btn text behaviour

css

vue.js

vuejs2

vuetify.js