Typography が枠内に収まらない

<Typography component='p'>{message}</Typography>

propsとして component='p'を渡してパラグラフ要素して使用。

動作の確認で下記の左側のように'aaaa'のように入力していたため、枠に収まらない理由がわからなかった...

しかし、日本語や'Hello world'のようにちゃんと文字を入力すれば普通に改行してくれて、枠内に収まってくれた...(勉強不足)

<Typography nowrap component='p'>{message}</Typography>

nowrapを使うと文字列の最後に'...'と表示できる。
しかも枠の大きさに合わせて'...'を表示してくれるので使い勝手はよさそう。

＊ただ、文字数を指定しないと下記の写真のように1行のみしか表示されないので注意が必要。