我有以下一組按鈕：
<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 中。
- 讓按鈕文本使用它需要的行。1,2,10 ...取決于它的長度。始終垂直增長并帶有換行符，就像授予 css 屬性 'word-break: normal;'
- 按鈕的寬度保持固定，占據整個列的寬度，因為 'block' 屬性應該導致。
所有這些都必須在桌面、平板電腦和移動視圖中實作。
你可以在這里測驗它。
uj5u.com熱心網友回復：
試試這個 ：
.v-btn__content {
white-space: normal;
flex: auto;
}
和：
.v-btn {
min-height: 52px;
height: 100% !important;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/402892.html
標籤：