datagrid 設定内容超過單元格寬度時自動換行顯示
by:授客 QQ：1033553122
測試環境
jquery-easyui-1.5.3
問題描述
單元格内容超過單元格寬度不會自動化換行。如下：
圖1：
圖2：
解決方法
定義表格時，設定nowrap屬性為false.
<table id='tt' class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:500px" data-options="
……
nowrap:false">
<thead>
……
</thead>
</table>
不足的是，設定為nowarp 可以做到換行顯示，不足的是，單個英文單詞很長的情況下，不會換行顯示，遇到數字串也不會換行顯示，如上圖2
注：
nowrap boolean 設定為 true，則把資料顯示在一行裡。設定為 true 可提高加載性能。
改進方案
添加以下CSS樣式
<style>
xmp {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
同時，把要展示的資料放 <xmp> 元素标簽中，形如<xmp> data to display </xmp>
說明：
white-space: pre-wrap; 保留白白符序列，但是正常地進行換行
word-wrap: break-word; 允許長單詞換行到下一行。類似的還有word-wrap: break-all; 如果該行已不能容納整個單詞(還可以容納單詞的部分)，允許長單詞被分成兩部分，一部分在上一行，剩餘部分放下一行開頭顯示。
展示效果如下
作者：授客
QQ：1033553122
全國軟體測試QQ交流群：7156436
Git位址：https://gitee.com/ishouke
友情提示：限于時間倉促，文中可能存在錯誤，歡迎指正、評論！
作者五行缺錢，如果覺得文章對您有幫助，請掃描下邊的二維碼打賞作者，金額随意，您的支援将是我繼續創作的源動力，打賞後如有任何疑問，請聯系我!!!
微信打賞
支付寶打賞 全國軟體測試交流QQ群