在 Kartik Gridview 数据列中自动换行 [英] Auto wrap in Kartik Gridview Datacolumn

问题描述

我的 Yii2 模板页面中有一个 kartik 的 gridview 小部件，它列出了从数据库中获取的数据，但是如果数据太长，它会在小部件底部显示水平滚动条，但我希望它自动包装内容的列只是为了适合页面.这是我的代码

I have a kartik's gridview widget in my Yii2 template page and it lists the data fetched from the database, however if the data is too long it shows a horizontal scroll at the bottom of the widget but I want it to auto wrap content of the column just to fit in the page. Here is my code

    <?= GridView::widget([
    'responsiveWrap' => false,
    'hover' => true,

    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'kartikgridSerialColumn'],
        'conf_key',
        ['attribute' => 'conf_value',
            'class' => 'kartikgridDataColumn',
            'noWrap' => false
        ],

        'class_name',
        ['class' => 'kartikgridActionColumn'],
    ],
]); ?>

我想包装 conf_value 列，例如怎么做?我在这里放了小部件的外观截图

I want to wrap conf_value column for example how to do it? here i put the screenshot how widget looks

注意:noWrap 不起作用，因为数据没有空格！

Note: noWrap doesn't work because the data have no whitespace!

推荐答案

感谢 gamitg 给了我一盏灯，所以我将代码更改为

Thanks gamitg for giving me a light so i have changed my code as

    <?= GridView::widget([
    'responsiveWrap' => false,
    'hover' => true,

    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'kartikgridSerialColumn'],
        'conf_key',
        ['attribute' => 'conf_value',
            'class' => 'kartikgridDataColumn',
            'noWrap' => false,
            //the line below has solved the issue
            'contentOptions' => 
            ['style'=>'max-width: 350px; overflow: auto; word-wrap: break-word;']
            ,
        ],
        'class_name',
        ['class' => 'kartikgridActionColumn'],
    ],
]); ?>

但我不能像 max-width: 50%; 那样给出 max-width 的百分比；有什么意见吗?

but I can't give percentage to max-width like max-width: 50%; is there any opinion?

这篇关于在 Kartik Gridview 数据列中自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！