Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8652

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

$
0
0

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

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


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

サンプル(codepen)

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


e2.png

HTML

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

CSS

.container{width:100%;height:24px;overflow:hidden;}.long_text{padding-right:24px;}.ellipsis{width:24px;margin:-48px00auto;}

しくみ

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

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

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

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

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


Viewing all articles
Browse latest Browse all 8652

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>