Vuetify v-btn テキストの動作

Question

我有以下一組钮：

<テンプレート>
    
        <v-card-title>
            <v-spacer></v-spacer>
            3つのボタン
        </v-card-title>
        
        <v-card-text>
            
                <v-colcols="12" sm="4" v-for="ボタンの中のボタン" :key="button.id">
                    <v-btn color="primary" x-large ブロック>
                        <span style="ワードブレイク: 通常 !重要;">{{button.text}}</span>
                    </v-btn>
                </v-col>
            </v-row>
        </v-card-text>
    </v-card>
</テンプレート>
<スクリプト>
デフォルトのエクスポート {
    データ （） {
        戻る {
            //これは製品コードではありません。ボタンのテキストは API 経由で取得され、長さは可変です
            ボタン: [
                {id:1, text: "私はボタンです"},
                {id:2, text: "私は別のボタンです。ブラ、ブラ、ブラ、ブラ"},
                {id:3, text: "私もボタンです"}
            ]
        }
    }、
}
</スクリプト>

この例では、テキストはハードコードされていますが、実際には、その長さは変更可能ですが、事前に知る必要はありません。

1. 本永不会像按钮 2 中那样出按钮の空間。
1、2、10... の長さによって、必要な行が使用されます。 開始终垂直增长并带有换行符，これにより css プロパティ「word-break：normal；」
2. が付与されます
選択の幅は固定されたままで、「ブロック」プロパティの結果と同様に、列全体の幅を占有します。
これらはすべて、パネル、パネル、およびモーション ビューで実行する必要があります。

ここでテストを実行できます。

Answer 1

＃＃＃これを試して：＃＃＃

.v-btn__content { ホワイトスペース: 通常; フレックス: 自動; }

＃＃＃そして：＃＃＃

.v-btn {
  最小高さ: 52px;
  高さ: 100% !重要;
}