【React ✗ MUI5】指定した行末に3点リーダーをつける

やりたいこと

MUI5で指定した行末に3点リーダーをつけたい。
前提としてMUI5ではsx propsを使うみたいなのでそれに則ってスタイリングする。
https://mui.com/system/the-sx-prop/

解決策

<Typography
  sx={{
    width: "100%",
    display: "-webkit-box",
    WebkitBoxOrient: "vertical",
    WebkitLineClamp: 5, // 行数指定
    overflow: "hidden",
  }}
>
  テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
</Typography>

CSSとMUI5で違う部分として、WebkitBoxOrientの書き方が違うので注意。
CSS: -webkitBoxOrient
MUI: WebkitBoxOrient

プレビュー

参考サイト

https://stackoverflow.com/questions/63592567/material-ui-text-ellipsis-after-two-line
https://qiita.com/cieloazul310/items/d630da98439c89d773ba