web-dev-qa-db-ja.com

HTML-DIVコンテンツの改行文字は編集可能ですか？

たとえば、データベースにコンテンツを保存しています：

Hello
This
is 
Text

それをtextareaに渡すと、新しい改行のままになります。しかし、コンテンツを編集可能なdivにそのテキストを渡すと、次のようになります。

Hello This is Text

この問題を修正するにはどうすればよいですか？

csshtml5htmlcontenteditable
40
Afonso Luis

Divにスタイルを設定します：white-space: preまたはwhite-space: pre-wrap

例： http://jsfiddle.net/fPv6S/

109
Explosion Pills

@ Explosion Pills 正解にいくつかの情報を追加し、 [〜＃〜] mdn [〜＃〜] ：

CSS white-space属性が役立ちます：

pre：

white-space: pre

空白のシーケンスは保持されます。行は、ソースの改行文字と<br>要素でのみ壊れます。

これにより、例に示すように、不要な水平スクロールバーが生じる可能性があります！

事前ラップ：

white-space: pre-wrap

空白のシーケンスは保持されます。行は改行文字、<br>、および必要に応じて行ボックスを埋めるために分割されます。

@ ceremcem が指摘したように、テキストがコピー＆ペーストされると、ボックスの最後の改行は転送されません。これは、これらの改行がテキストのフォーマットですが、視覚的な外観です。

前行：

white-space: pre-line

空白のシーケンスは折りたたまれています。行は改行文字、<br>、および必要に応じて行ボックスを埋めるために分割されます。

div{
  border: 1px solid #000;
    width:200px;
}
.pre {
    white-space: pre;
}
.pre-wrap{
   white-space: pre-wrap;
}
.pre-line{
   white-space: pre-line;
}

.inline-block{
    display:inline-block
}
<h2>
pre
</h2>
<div class="pre" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
pre-wrap
</h2>
<div class="pre-wrap" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
pre-line
</h2>
<div class="pre-line"  contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
Chrome FIX
</h2>
<div class="pre-line inline-block"  contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

2018年8月14日編集：

In Chromeトラブルが発生する可能性があります：を押す Enter contenteditable内に新しい<div>を生成します。それを防ぐには、次のいずれかを押します Shift+Enter または、display: inlineをコンテンツ編集可能<div>に設定します（フィドルで表示）。

4
Sebbas

これを試して......

var patt2 = new RegExp("<div>","g");
var patt3= new RegExp("</div>","g");
var patt4= new RegExp("<br>","g");
var z=x.replace(patt2,"\n").replace(patt3,"").replace(patt4,"");

それでできます...

2
Subham Debnath

改行を検索して<br />に置き換えることができます。 http://jsfiddle.net/fPv6S/1/

2
andi