文本的對齊的DIV（有沒有空格TEXT）

Question

如果我進入冗長的文字在textarea的與沒有空格我追加，它擾亂DIV的對準和文本顯示在單行。如何在帶固定寬度的DIV中控制這種類型的文本？

這裏是我的DEMO：

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

使用CSS

word-wrap:break-word; 

DEMO

Answer 3

使用本：

.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 4

注意：此代碼不使用CSS3屬性

您可以更新的CSS屬性div與溢出。 like，

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