特定のYii2 GridView列のテキストを切り捨てて、ホバーに表示する方法はありますか？

Question

私は、GridViewのウィジェットを使用して、テーブルをレンダリング：

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

私は、「件名」欄に表示されるテキストを切り捨てても、フィルタ行の検索機能を維持しながら、ホバーに完全にそれを表示する必要があります。

I）は、（:: 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を介して他のエフェクトを追加し、あなたが行われています。