環境

• 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;だと左揃えになる。

参考文献・URL

「v-btnコンポーネントのテキストが折り返されない問題」における戦いのいく末を覗く - OPTiM TECH BLOG

こんにちは、AI・IoTサービス開発部の岩丸です。 普段の業務では主に**Vue.js + TypeScript + Vuetify**と格闘しております。VuetifyやMUIなどのCSSライブラリを使用していると、非常に多くの恩恵を受ける反面デフォルトのCSS設定に悩まされることが多々あるかと思います。 今回はVuetifyが提供するButtons(v-btnコンポーネント)でハマったことについてご紹介したいと思います。

tech-blog.optim.co.jp