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

Question

我使用的GridView控件呈现一个表：

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

我需要截断，在“主题”栏显示的文本，并充分展现出它在悬停，同时也保留了过滤器行搜索功能。

我成功地截断使用的StringHelper :: TruncateWords（）的内容，但无法弄清楚过滤行和悬停部分：

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

也许有一种方法用纯引导要做到这一点不需要StringHelper，但我无法使其工作...

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; 
} 

，并鉴于刚刚添加的类别：

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

调整最大宽度你的愿望，通过添加其他CSS3特效，就大功告成了。