環境
- Vuetify 3.1.1
方法
Vuetify 3の<v-btn>内で文字を改行させるには、文字を<span>や<dev>タグで囲って、そのstyleにwhite-space: normal;を定義すればよい。
<v-btn>タグに直接指定しても反映されないので注意。
<v-btn>
<span style="white-space: normal">Reset check</span>
</v-btn>これでボタン内の文字が入りきらなくなった際に、スペースで改行される。
ボタンのサイズも自動で変更される。
overflow-wrap: anywhere;を定義すれば、単語の途中でも改行できる。
ちなみに、white-space: normal;だと改行した後中央揃え、white-space: pre-wrap;だと左揃えになる。