ellipsisに記号を使いたい。CSSのみでやりたい

文字が見切れた時に「...」を表示するellipsis。
これを「...」じゃないほかの何かを表示したいことがあった。
ググっても出てこなかったので自分で作ってみた。ので公開する。

ちなみにJSを使いだすと画面サイズ変わったイベントとかいちいち取らないといけないのが面倒なのでCSSだけでやりたい

---

見切れた時に★を表示するサンプル

サンプル(codepen)

見切れた時、文末に★が出る。

↓

HTML

<div class="container">
  <div class="long_text">
    長いテキスト長いテ長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキストキスト長いテキスト
  </div>
  <div class="ellipsis">
    ★
  </div>
</div>

CSS

.container {
  width: 100%;
  height: 24px;
  overflow: hidden;
}

.long_text {
  padding-right: 24px;
}

.ellipsis {
  width: 24px;
  margin: -48px 0 0 auto;
}

しくみ

• ★は.ellipsisのCSSで指定しているネガティブマージンによって-48px上にずれて表示されている。
  で、.containerの外はoverflow: hiddenによって見えなくなっているので長いテキストが全部見えているときには上にずれてる★は見えない。

• 幅が縮んで長いテキストが折り返されるとテキストの後ろにおいてある★も折り返されて一段下に降りてくる。
  そうすると.containerの表示領域内に入ってくるので★が表示される。
  折り返された先のテキストはoverflow: hiddenによって見えなくなる。

• ★はmargin: autoによって常に右寄せになっているので、「...」の位置的な所に★が表示される。

• 長いテキストのお尻には★を表示するため１文字分paddingを入れてある

• 英語とか混ざる場合は単語折り返しを無効にしないと変な感じになるかも