Question

如果我在 Textarea 中输入冗长文字 无空格且我追加，则干扰 DIV 的对齐，文字显示在单行中。如何在固定宽度的DIV中控制这种类型的文本？

这是我的演示：

另请查看此图片，尝试以更好的方式解释我的问题。

enter image description here

我也在这里提供代码或访问我的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 CODE：

$('.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;

DEMO

Answer 4

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

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

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

在DIV中对齐文本（没有空格的TEXT）

4 个答案: