Vuetify v-btn 文字行為

Question

我有以下一組按鈕：

<模板>
    
        ;
            <v-間隔物></v-間隔物>
            三個按鈕
        </v-card-title>
        
        
            <v-行>
                
                    
                        {{button.text}}
                    </v-btn>
                </v-col>
            </v-row>
        </v-card-text>
    </v-card>
</範本>
<腳本>
導出預設值{
    數據 （） {
        返回 {
            //這不是生產程式碼。按鈕文字透過api獲取，長度可變
            紐扣： [
                {id:1, text: "我是一個按鈕"},
                {id:2, text: " 我是另一個按鈕。Bir, bla, bla, bla"},
                {id:3, text: "我也是按鈕"}
            ]
        }
    },
}
</腳本>

這裡範例中，文字是硬編碼的，但實際上我是從API取得文字的。它的長度是可變的，我無法事先知道。我需要：

1. 文字永遠不會像按鈕2那樣溢出按鈕的空間。
2. 讓按鈕文字使用它需要的行。1,2,10...取決於它的長度。 始終垂直增長並帶有換行符，這將設定 css 屬性「word-break：正常；」
3. 按鈕的寬度保持固定，訂閱列的整個寬度，正如“block”屬性所導致的那樣。

所有這些都必須在桌面、平板電腦和行動視圖中實現。

您可以在這裡進行測試。

Answer 1

試試這個：

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

和：

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