<textarea>をマルチカラムレイアウトに適合させる方法は？

Question

これは、列にいくつかのテキストが表示されます：

<div class="content-box" style="column-width: 8em"> 
    <p>blah blah...</p> 
    <p>blah blah...</p> 
    <p>blah blah...</p> 
</div> 

をしかし、テキストエリアは、テキストの残りの部分のように列単位をラップしていないよう：

<div class="content-box" style="column-width: 8em"> 
    <p>blah blah...</p> 
    <textarea rows="100"></textarea> 
    <p>blah blah...</p> 
    <p>blah blah...</p> 
</div> 

私はラインでテキストエリアを表示したいですテキストが長すぎると、次の列にこぼれ落ちることがあります。基本的には編集可能な領域以外のテキストのように見えるはずです。この仕事をする方法はありますか？

私はmad-libsアプリケーションを構築しようとしています。テキストの特定の部分を編集可能（空白部分を埋める）にする必要がある以外は、複数列のテキストレイアウト（新聞のように見える）があります。編集可能な領域は長くなることがあり、通常のテキストのように、編集が終了すると次の列に正常に流出するはずです。

Answer 1

textareaがあることをしないだろう

が、contenteditable要素になる

div[contenteditable] { 
 
    outline: none; 
 
}

<div class="content-box" style="column-width: 8em"> 
 
    <p>blah blah...</p> 
 
    <div contenteditable> 
 
    blah edit<br> 
 
    blah edit<br> 
 
    blah edit<br> 
 
    blah edit<br> 
 
    blah edit<br> 
 
    blah edit<br> 
 
    blah edit<br> 
 
    blah edit<br> 
 
    blah edit<br> 
 
    blah edit<br> 
 
    blah edit<br> 
 
    </div> 
 
    <p>blah blah...</p> 
 
    <p>blah blah...</p> 
 
</div>

Answer 2

textarea要素を使用してこれを達成できるとは思いません。これはブラウザのデフォルトに依存し、他の要素と同じくらいの柔軟性は許されません。

あなたができることは、CSSを使用して一種のテキストエリアをシミュレートし、イベントを自分で処理することです（キーボードとマウスイベントを使用して）。これは大変な作業かもしれませんが。