サムネイルの下に記事のタイトルを表示たりとか、サイトコンテンツのヘッダに長いタイトルが設定されている場合にってあると思います。

テキストをいい感じに省略したい！

で、これをいい感じに省略したいんですが、文字数で省略すると最近のフォントはプロポーショナルフォントなので、同じ文字数でも表示上の幅が長かったり短かったりしていい感じにならない場合があります。

そういう時は下記のようにCSSを設定すると、はみ出たテキストが良い感じに省略されます。

.box-title{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

テキスト省略「無し」の場合はこんな感じ

テキスト省略「有り」の場合はこんな感じ