zoukankan      html  css  js  c++  java
  • 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="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; 如果该行已不能容纳整个单词(还可以容纳单词的部分),允许长单词被分成两部分,一部分在上一行,剩余部分放下一行开头显示。

     

    展示效果如下

     

     

  • 相关阅读:
    MYSQL InnoDB二级索引存储主键值而不是存储行指针的优点与缺点
    公众号 苹果端点击事件委托不起作用而安卓可以
    php emoji表情转换
    PHP 获取网页所有链接
    node 一行一行的读取文件
    AsyncJS 异步流程控制DEMO详细介绍
    node.js 获取异步方法里面数据 的方式
    利用blob 加密防下载
    html css 3D轮播图
    transform和transition组合动画错误问题
  • 原文地址:https://www.cnblogs.com/shouke/p/10274891.html
Copyright © 2011-2022 走看看