javascript - DIV 内のテキスト (スペースのない TEXT) の配置

Question

Textareaに長いテキストをスペースなしで入力して追加すると、DIVの配置が乱れ、テキストが1 行で表示されます。固定幅の DIV でこのタイプのテキストを制御する方法は?

これが私のデモです：

http://jsfiddle.net/YRKxR/29/

また、この画像を見てください。私の問題をより良い方法で説明しようとしています。

ここでもコードを提供しています。または、私の JsFiddle DEMO にアクセスしてください。

ここに私のHTMLがあります:

<table border="0" width="500" cellspacing="0">
   <tbody class="append_data"></tbody>

<tr>
  <td> 
      <textarea name="description" id="description"></textarea>
      <p>
          <a href="javascript:void(0);" class="add_more">Add More</a>
      </p>
  </td> 
</tr> 

</table> 

CSSは次のとおりです。

#description{
    width:400px;    
}

.description_text{
    border:#333333 solid 1px;
    width:400px !important;
}

ここに私のJSコードがあります:

$('.add_more').click(function()
                     {
                        var description = $('#description').val();
                        $(".append_data").append('<div class="description_text">'+description+'</div><br><br>');
                     });

Answer 1

div でテキストをラップすることを検討している可能性があります。

CSS:

#description{
    width:400px;    
}

.description_text{
    border:#333333 solid 1px;
    width:400px !important;
}

.append_data{
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

http://jsfiddle.net/7jE9p/

Answer 2

これを使って：

.description_text{
    border:#333333 solid 1px;
    width:400px !important;
    word-break:break-all; // this is the css property that would work
}

ここで働くフィドル：http://jsfiddle.net/YRKxR/31/

Answer 3

CSS を使用する

word-wrap:break-word;

デモ