text-overflow: ellipsisが上手く動作しない？ 解決してあげよう。 - Qiita

まず、text-overflow: ellipsisとは、オーバーした分の文字列を...で省略してくれるというものです。 詳しくはMDN web docs: text-overflowを参照してください。 前提条件 まず、text-overflow: ellipsisを有効にするためには、以下のプロパティ達を設定する必要があります。 .over-text { /* オーバーした要素を非表示にする*/ overflow: hidden; /* 改行を半角スペースに変換することで、1行にする */ white-space: nowrap; /* 幅を指定しないとテキストの長さによって要素の幅が変わるため指定 */ width: 120px; /* オーバーしたテキストを３点リーダーにする */ text-overflow: ellipsis; } text-overflow: ellipsis