web-dev-qa-db-ja.com

改行付きのテキストを含むラベルを表示する方法は？

次のようにテキストを<textarea>に入れます：

First day
1-one Apple.
2-one orange.
3-two cups of milk.

ただし、次のような<label>で表示されます。

First day 1- one Apple. 2-one orange. 3- two cups of milks.

<textarea>と同じようにするにはどうすればよいですか？

htmlcsslabelline-breaks
14
ubuntu

ラベルwhite-space: pre-wrapを付けると、テキスト領域と同様に改行されます

textarea {
  height: 70px;
}
label {
  white-space: pre-wrap;
}
<textarea>
  First day
1-one Apple.
2-one orange.
3-two cups of milk.
</textarea>

<br><br>

<label>
  First day
1-one Apple.
2-one orange.
3-two cups of milk.
</label>

改行文字と組み合わせたwhite-spaceプロパティ（例：\n）に加えて、HTMLの改行方法は<br>を使用することです。ここに、それらがどのように機能し、異なるかを追加します。

「インライン」コードサンプルで見られるように、スペースは偶数を保持します（例：white-space: pre）

var sample_script = document.querySelector('.sample.script');

var name = "One Two Three";
var name1 = name.replace(/ /g, '\n');
var name2 = name.replace(/ /g, '<br>');

sample_script.innerHTML += name1;
sample_script.innerHTML += "<br><br>";
sample_script.innerHTML += name2;
div.pre {
  white-space: pre;
}


/*  styling for this demo  */
body {display: flex;}
.sample {flex: 1; margin: 0 20px;}
<div class="sample inline">

  Inline
  <hr>
  <div>
    One
    Two
    Three
  </div>

  <div class="pre">
    One
    Two
    Three
  </div>
</div>

<div class="sample script">
  Script
  <hr>

</div>
36
LGSon

<textarea>タグにHTMLタグを追加する方法がないため、たとえばcssを使用した書式設定や<br>タグを使用した書式設定は機能しません。

さて、<textarea rows="4" cols="20">は、できる限り良いことだとしましょう。表示する最小行を「4」、行ごとの最小文字数を「20」と定義します。

ただし、最良の方法は<div contenteditable="true"></div>のようなタグとcssスタイルを使用できる<br>を使用することです。

1
arch1ve

Textarea自体からテキストをフェッチしている場合、改行を作成するtextareaでEnterキーを押すと戻ります。改行を次のように置き換えることができます

/n, /r with <br>

0
pradeep1991singh