Easyui datagrid 設置內容超過單元格寬度時自動換行顯示


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; 如果該行已不能容納整個單詞(還可以容納單詞的部分),允許長單詞被分成兩部分,一部分在上一行,剩余部分放下一行開頭顯示。

 

展示效果如下

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM