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-wrap; // ソース中のホワイトスペースを無視します。
white-space: nowrap; // nowrapは改行禁止で1行になる

CSSの単語を改行させない

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

スポンサーリンク

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

なんの話かというと、

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

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

コメント

タイトルとURLをコピーしました