疑念は探究の動機であり、探究の唯一の目的は信念の確定である。

数学・論理学・哲学・語学のことを書きたいと思います。どんなことでも何かコメントいただけるとうれしいです。特に、勉学のことで間違いなどあったらご指摘いただけると幸いです。 よろしくお願いします。くりぃむのラジオを聴くこととパワポケ2と日向坂46が人生の唯一の楽しみです。

Vuetify: v-btnの文字を改行する方法

概要
v-btnの文字を改行する方法を示す。


ソースコード

<template>
  <v-app>
  <div>
  <h1>button new line</h1>
  <div class="mt-6 mb-6">
    <v-btn class="new-line-button text-pre-wrap text-left" block>{{textHello}}</v-btn>
  </div>
  <div class="mb-6">
    <v-btn class="new-line-button text-pre-wrap text-left" block>{{textNewLine}}</v-btn>
  </div>
    <div class="mb-8">
      <v-btn class="new-line-button text-pre-wrap text-left">{{textNewLine}}</v-btn>
    </div>
  </div>
  </v-app>
  </template>
  <script>
  
  export default {
    data: () => ({
      textHello: 'Hello,\nWorld!\nFunction, Hello!\nWorld!!!\nFunction,\t Hello,\nWorld!\nFunction, Hello\nWorld!\nFunction, Hello!!\nWorld\nFunction',
      textNewLine: 'これはボタンです。\n改行されます。'
    }),
  };
  </script>
  <style lang="scss" scoped>
  .new-line-button.v-btn {
    height: auto;
    padding: 0.8% 2%;
  }
  </style>


実行結果

詳細

クラス作成

  • 今回はcssのクラスnew-line-buttonを作成しました。これがv-btnにあると改行されます。

ボタンの高さを自動的に変える

  • height: auto;によって、改行数に対して自動的にボタンの幅が変わります。もしこれをなくすと、文字がボタンからはみ出します。

改行の文字について

  • textHellotextNewLinepropsに対して改行がおこなえますが、v-btnに直接書いても改行にはなりません。

つまり次のように書いても改行はされません。

<v-btn class="new-line-button text-pre-wrap text-left">これはボタンです。\n改行されます。</v-btn>

改行した文字を左寄せにする(text-left)

  • text-leftを使うことで、改行した文字を左側に寄せることができます。もしもこれを設定しないと次のように中央揃えに表示されます。

text-pre-wrapを設定する

  • テキストをそのまま表示するtext-pre-wrapやテキストを左側に寄せるtext-leftを自作したclassの中に入れたほうがよりよいのですが、私はわかりませんでしたので、VuetifyにあるText and typographyを使いました。

不具合がある場合

  • 私の場合、上記のコードで特に問題ありませんでしたが、何か不具合やおかしい箇所があれば、さらに次のような.new-line-button.v-btn__contentを追加したほうがいいかもしれません。
.new-line-button.v-btn__content {
   flex: auto;
 }