我们在jquery数据表中使用Scroller插件来允许虚拟滚动.但是,我们要求支持单元格内的文本换行,因为用户希望查看整个文本而不是截断的文本.我发现默认情况下它不会包装文本.有没有办法支持这个功能？任何可能的解决方法？

提琴手
https://jsfiddle.net/Vimalan/2koex0bt/1/

@H_404_11@

@H_404_11@var detailsSample = "DataTables and its extensions are extremely configurable libraries and almost every aspect of the enhancements they make to HTML tables can be customised. Features can be enabled,disabled or customised to meet your exact needs for your table implementations."
var dataList = [];

for (var i=1; i<=500; i++)
{
    var dataRow = {};

    dataRow.ID = i;
    dataRow.FirstName = "First Name " + i;
    dataRow.LastName = "Last Name " + i;

    if (i%5 ==0)
    {
        dataRow.Details = detailsSample;
    }
    else
    {
        dataRow.Details = "Large text "+i;
    }
    dataRow.Country = "Country Name";

    dataList.push(dataRow);
}

$('#example').DataTable( {
                data:                       dataList,deferRender:    true,scrollX:                true,scrollY:        200,scrollCollapse: true,scroller:       true,searching:          false,paging:                 true,info:                   false,columns: [
                { title: "ID",data: "ID" },{ title: "First Name",data: "FirstName" },{ title: "Change Summary",data: "LastName"},{ title: "Details",data: "Details","width": "400px"  },{ title: "Country",data: "Country" }               
            ]
    } );

期望

在上表中,“Details”列的宽度应始终为400px,并且该列中的文本应该换行.

任何建议将不胜感激.

最佳答案

通过将列数据包装在div中并设置div的white-space,width css属性来找到解决方案.

小提琴手：https://jsfiddle.net/Vimalan/2koex0bt/6/

@H_404_11@$('#example').DataTable( {
        data:           dataList,scrollX:        true,searching:      false,paging:         true,info:           false,data: "Details" },data: "Country" }               
            ],columnDefs: [
                {
                    render: function (data,type,full,Meta) {
                        return "

CSS

@H_404_11@.text-wrap{
    white-space:normal;
}
.width-200{
    width:200px;
}

上一篇：如何隐藏CSS 下一篇：html – Prettify不能在本地正确

猜你在找的CSS相关文章

IE浏览器兼容性调整总结技巧

前言最近项目做完，用户需要兼容IE，于是开展了兼容性的调整工作。边调整边想感叹IE真是个...

作者：前端之家时间：2021-02-13

css属性总结

前言有些属性不是很常用，但是工作中遇到了，记录一下，方便学习。 1、text-indent text-...

作者：前端之家时间：2021-02-13

政府网站公祭日，如何使网站整体变灰

前言政府网站会遇到公祭日的时候，网站整体颜色变灰的情况。今天正好调了一下。在此把解决...

作者：前端之家时间：2021-02-13

css实现图片动画效果

需求项目里有个消息中心，当有消息的时候，小铃铛图标可以晃两下，提示当前有信息。实现...

作者：前端之家时间：2021-02-13

css实现文字渐变

html代码 css代码效果图

作者：前端之家时间：2021-02-13

移动端rem距离单位的使用

在做移动端开发的时候大家肯定会遇到适配问题，手机的屏幕大小有非常多的类别，使用传统的...

作者：前端之家时间：2021-01-10

使用 media 实现响应式布局

最近工作有一个需求是将一个界面改为响应式布局，由于UI还没有给设计，于是自己先查了一下...

作者：前端之家时间：2021-01-10

教你用原生CSS写炫酷页面切换效果，跟第三方组件说拜拜

因为项目需要，别人想让我给他写一个个人博客，并且给了我一个其他人的网页，可以点此查看...

作者：前端之家时间：2021-01-10

CSS盒模型之内边距、边框、外边距十九问（持续更新）

本篇文章主要探讨盒模型，以及内边距、边框、外边距的面试题与思考，也希望您能把您的思考...

作者：前端之家时间：2020-12-30

轻松上手CSS Grid网格布局

今天刚好要做一个好多div格子错落组成的布局，不是田字格，不是九宫格，12个格子这样子，看...

作者：前端之家时间：2020-12-29

javascript – jquery datatable – 设置列宽和换行文本

猜你在找的CSS相关文章