概要
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;
によって、改行数に対して自動的にボタンの幅が変わります。もしこれをなくすと、文字がボタンからはみ出します。
改行の文字について
textHello
やtextNewLine
のprops
に対して改行がおこなえますが、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; }