javascript - DIV 中文本的对齐方式（没有空格的文本）

Question

如果我在Textarea中输入没有空格的冗长文本并附加它，它会扰乱DIV的对齐并且文本显示在Single Line中。如何在固定宽度的 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;

演示

Answer 4

注意：此代码不使用 CSS3 属性

您可以使用溢出更新 div 的 css 属性。像，

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