Angular Materialで作成したテーブルのセル内の文章を3行で打ち切り、末尾を…で締めたい

前提・実現したいこと

Angular Materialで作成したテーブルのセル内に入る文章が4行以上に渡る場合、3行で表示を打ち切り、末尾を…で締めたい。

発生している問題

試したこと①の結果
テーブルのレイアウトが崩れてしまう

試したこと②の結果
表示が1行で打ち切られてしまう

該当のソースコード

https://codesandbox.io/s/romantic-banzai-5cc3u
を参照ください

試したこと

①

css
1.mat-cell.mat-column-name, .mat-cell.mat-column-weight{
2  display: -webkit-box;
3  -webkit-line-clamp: 3;
4  -webkit-box-orient: vertical;
5  overflow: hidden;
6}

②
clumpjsの導入
https://github.com/josephschmitt/Clamp.js

補足情報（FW/ツールのバージョンなど）

Angular10

以上、よろしくおねがいします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

ラッパー要素を使うのではダメですか？

html
1      <td mat-cell *matCellDef="let element"><div>{{element.name}}</div></td>

css
1.mat-cell.mat-column-name div,
2.mat-cell.mat-column-weight div {
3  display: -webkit-box;
4  -webkit-line-clamp: 3;
5  -webkit-box-orient: vertical;
6  overflow: hidden;
7}