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

まず、text-overflow: ellipsisとは、オーバーした分の文字列を...で省略してくれるというものです。
詳しくはMDN web docs: text-overflowを参照してください。

前提条件

まず、text-overflow: ellipsisを有効にするためには、以下のプロパティ達を設定する必要があります。

style.css

.over-text {
  /* オーバーした要素を非表示にする*/
  overflow: hidden;

  /* 改行を半角スペースに変換することで、1行にする */
  white-space: nowrap;

  /* 幅を指定しないとテキストの長さによって要素の幅が変わるため指定 */
  width: 120px;

  /* オーバーしたテキストを３点リーダーにする */
  text-overflow: ellipsis;
}

text-overflow: ellipsisだけ指定していて有効にならないという人は、まず上記のプロパティを設定してみましょう。

それでも、動作しない場合

上記の、前提条件を満たしても動作しない場合は以下のような場合があります。

display: flexを指定している

これは実際に僕が遭遇した事例で、調べてもなかなか出てこなかったことです。

flex.css

.text-flex {
  display: flex;
  align-items: center;
}

と、上記のように指定して、テキストの高さの位置を真ん中にしようとしていたわけです。

ちなみにですがtext-overflowがflexboxでうまく動作しなことがわかり、css text-overflow ellipsis flexなどで検索をかけると結構な件数がヒットします。
ただ、css text-overflow ellipsis 動作しないとかだとflex関連のものがヒットしないのでハマりました。

解決策

display: flexが原因だとわかれば、あとは検索するだけで、様々な解決法が見つかると思いますが、それで終わりでは丸投げムーブすぎるので、ここでは僕のとった方法を紹介します。

index.html

<div class="text-flex">
  <div class="over-text">
   鳴かぬなら 鳴かせてみよう ホトトギス
  </div>
</div>

style.css

.text-flex {
  display: flex;
  align-items: center;
}

.over-text {
  overflow: hidden;
  white-space: nowrap;
  width: 120px;
  text-overflow: ellipsis;
}

この方法では、text-overflow: elipsisをかけたい要素をdisplay: flexを設定した要素でラップしてあげれば、flexをかけつつ３点リーダー...にできます。

階層が一つ深くなりますが、解決策としてはスタンダードなものだと思います。

最後に

間違っているところがあれば、コメントで教えていただけるとありがたいです。修正しますので。
ただ、執筆者は豆腐メンタルなので誹謗中傷はやめてください（土下座）