Nuxt(Vue)のマスタッシュ構文やdataで改行されない(white-space: pre-wrap;)

vueの改行問題をまとめておきます。いろいろな解決方法があるようですが、CSSで解決する方法が簡単そうです。

Nuxt(Vue)のマスタッシュ構文で改行されない

たとえば、複数のエラー文を表示する場合、\nはbrタグではなく、改行されません。かといって、brにすると、brという文字列がマスタッシュ構文でそのまま表示されるだけ。

this.errors = result.errors.join('\n')

その場合、CSSで調整します。

<div style=" word-wrap: break-word; white-space: pre-wrap;">
{{  errors  }}
</div>

改行禁止の場合はnowrapもあります。

white-space: nowrap;

Nuxt(Vue)のdataの改行

data側は\n、もしくはバックスラッシュ(`)にします。

  data() {
    return {
      arrays: [
        {
          id: 'info',
          name: '情報\n交換',
          icon: 'info',
        },
        {
          id: 'work',
          name: `仕事の
                 仕事の
                 仕事`
        }
     ]
  }
}

表示するところにCSSを適用させます。

white-space: pre-line;

white-space: pre-wrap; pre-line; nowrap;の違い

white-space: pre-wrap; // はみ出ているのは折り返す、タブやスペースをそのまま表示
white-space: pre-line; // はみ出ているのは折り返す、タブやスペースまとめる
white-space: nowrap; // nowrapは改行禁止で1行になる

たとえば、上記のコードブロックを改行させたい場合などに使えます。

pre-wrap;とpre-line;の違いはわかりにくかもですが、タブやスペースをそのまま表示するのがpre-wrap;2つのスペースが1つになっているのがpre-line;。どっちを使うか迷うところですが、スペースを綺麗に取りたい几帳面な人はpre-wrap;ですかね。

なお、word-wrap: break-word;は使わなくてもうまくいきました。

CSSの単語を改行させない

なお、nowrapはあまり使わず、改行しない場合はspanをdivに変えたり、display: inline-block;を使ったりが多いかもしれません。

マスタッシュ構文で空白を作ると高さになる

なんの話かというと、

マスタッシュ構文が空の場合、fontsize分つぶれるんですね。paddingをいれてもつぶれることには変わりありません。

しかし、cssのheightが都合上、使えない場合がありました。その場合、こんな方法で回避しました。

{{ getData ? getData.mes + ‘ ’ : ” }}#プログラミングスクール

— ebookbrain@解約金なし光回線,WIfi,電子書籍 (@e_itbrain) June 25, 2022

めも程度に残しておきます。

ご参考になれば幸いです。