Question

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

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

    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'kartik\grid\SerialColumn'],
        'conf_key',
        ['attribute' => 'conf_value',
            'class' => 'kartik\grid\DataColumn',
            'noWrap' => false
        ],

        'class_name',
        ['class' => 'kartik\grid\ActionColumn'],
    ],
]); ?>

我想包装conf_value列，例如怎么做？在这里我把屏幕截图看小部件看起来

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

Answer 1

您需要在css中使用max-width。

喜欢，

td {
    max-width: 100px;
    overflow: auto; /* optional */
    word-wrap: break-word;
}

注意：在您的代码段上进行了测试。

Answer 2

感谢gamitg给了我一个灯，所以我改变了我的代码

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

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

但我无法给出最大宽度的百分比，如最大宽度：50％;有什么意见吗？

在Kartik Gridview Datacolumn中自动换行

2 个答案: