如何截断特定 Yii2 GridView 列中的文本并在悬停时显示？

Question

我使用 GridView 小部件呈现 table：

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,   
    'columns' => [
        'subject',
        // ...
    ],
]) ?>

我需要截断 "subject" 列中显示的文本并在悬停时完整显示，同时保留筛选行搜索功能。

我设法使用 StringHelper::TruncateWords() 截断了文本，但无法找出过滤器行和悬停部分：

[
            'attribute' => 'subject',
            'value' => function($model) {
                $ret = \yii\helpers\StringHelper::truncateWords($model->subject, 5, '...', false);
                return $ret;
            }
],

也许有一种方法可以在不需要 StringHelper 的情况下使用纯 Bootstrap 来做到这一点，但我无法让它工作...

Answer 1

实际上有更简单的解决方案。您可以使用纯 CSS 来执行此操作。

.truncate {
   max-width: 150px !important;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.truncate:hover{
   overflow: visible;
   white-space: normal;
   width: auto;
}

并在视图中添加 class:

[
  'attribute' => 'subject',
  'contentOptions' => ['class' => 'truncate'],
],

根据需要调整最大宽度，通过 css3 添加其他效果即可。

如何截断特定 Yii2 GridView 列中的文本并在悬停时显示？

How to truncate text in a specific Yii2 GridView column and show it on hover?

gridview

truncate

hover

yii2

twitter-bootstrap-3