Vuetify-v-btnでボタンからはみ出す
解決したいこと
ボタンからはみ出ないようにしたい。
例)
選択肢形式で解答するアプリを作りました。選択肢の文字列が多いと画面をはみ出してしまいます。
max-widthを設定しています。
解決方法を教えて下さい。
該当するソースコード
<v-btn
outlined
x-large
class="mb-2 mx-0 py-auto"
style="text-transform: none; display: block; white-space: normal;"
>
<span>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</span>
</v-btn>
自分で試したこと
- v-btnのstyleにdisplay: block !important; white-space: normal !important; overflow-wrap: anywhere !important;を追加しましたが、横にはみ出るだけでした。
- heightを指定するとはみ出ずに済みますが、画面幅や文字数を考慮して設定しないといけないです。
- max-heightを指定しましたが効きませんでした。
参考
バージョン
vue: 2.6.11
vuetify: 2.6.4
0