javascript - DIV 中的文本对齐(TEXT 没有空格)

Question

如果我在 Textarea 中输入 Lengthy Text 没有空格 并且我附加它，它扰乱 DIV 的对齐 并且文本以单行 显示。如何在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/