datagrid 設置內容超過單元格寬度時自動換行顯示 by:授客 QQ：1033553122 測試環境 jquery-easyui-1.5.3 問題描述 單元格內容超過單元格寬度不會自動化換行。如下： 圖1： 圖2： 解決方法 定義表格時，設置nowrap屬性為false. <table id=' ...
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; 如果該行已不能容納整個單詞(還可以容納單詞的部分)，允許長單詞被分成兩部分，一部分在上一行，剩餘部分放下一行開頭顯示。
展示效果如下
