我使用 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;
}
],
也许有一种方法可以使用纯 Bootstrap 来完成此操作,而不需要 StringHelper,但我无法使其工作......
最佳答案
实际上有更简单的解决方案。您可以使用纯 CSS 来执行此操作。
.truncate {
max-width: 150px !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.truncate:hover{
overflow: visible;
white-space: normal;
width: auto;
}
并在 View 中添加类:
[
'attribute' => 'subject',
'contentOptions' => ['class' => 'truncate'],
],
根据需要调整最大宽度,通过 css3 添加其他效果,就完成了。
关于gridview - 如何截断特定 Yii2 GridView 列中的文本并在悬停时显示它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43630036/