Help us understand the problem. What is going on with this article?

改行コード(\n)が含まれる文字列をブラウザの表示上で改行表示させる方法

More than 1 year has passed since last update.

はじめに

HTMLタグの要素内容として、改行コードを含む文字列を埋め込んだ場合に改行の見せ方をブラウザ側で調整する方法がわかりました。
vue.jsを使用したプロジェクトなのでVue.jsのコンポーネントを使用していますが、vue.jsとかmustache記法は関係ありません。

困っていること

何もしないと、こんな感じになります。
エラーメッセージとはいえ、美しく表示させたいのでエラーメッセージ毎に改行表示させたい。
JS側のコードになるべくHTMLタグを入れ込みたくない。

  • 実行結果

error1.png

  • サンプルコード
<template>
  ...
  <strong>Error:&nbsp;{{message}}</strong>
  ...
</template>
<script>
export default {
  data() {
    return {
      message: `User nameは必須項目です。
                E-mailは必須項目です。
                New passwordは必須項目です。`
    }
  }
}
</script>

解決方法

CSSまたはStyle属性にCSS属性「white-space」を指定する。

white-spaceとは

  • 空白文字(半角スペースやタブ、改行など)をブラウザでどのように扱うか指定する際に使用する。
  • 指定例
    • 連続する空白を詰めて表示する or そのまま残して表示する
    • 右端で自動的に折り返す or <br>で改行するまで折り返さない

指定方法

# 指定方法 説明
1 white-space: normal 連続する空白文字を1つの半角スペースとして表示する。ボックス右端で自動的改行される。
2 white-space: nowrap 連続する空白文字を1つの半角スペースとして表示する。<br>で改行するまで折り返さない
3 white-space: pre 連続する空白文字をそのままの状態で表示する。<br>で改行するまで折り返さない
4 white-space: pre-wrap 連続する空白文字をそのままの状態で表示する。ボックス右端で自動的に改行される。
5 white-space: pre-line 改行以外の連続する空白文字を1つの半角スペースとして表示する。改行(\nなど)は改行表示される。ボックス右端で自動的改行される。
  • さらに CSS属性「word-wrap:break-word」を設定すると、ブラウザが単語境界を考慮して折り返してくれる。

解決方法を適用した結果

今回は「white-space: pre-wrap」と「word-wrap:break-word」を指定しました。

  • 実行結果

error2.png

  • サンプルコード
<template>
  ...
  <strong style="white-space:pre-wrap; word-wrap:break-word;">Error:&nbsp;{{message}}</strong>
  ...
</template>
<script>
export default {
  data() {
    return {
      message: `User nameは必須項目です。
                E-mailは必須項目です。
                New passwordは必須項目です。`
    }
  }
}
</script>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away