メディアなんかでたまに使う「複数行の文末三点リーダー」の最善策を見つけた

業務で使った複数行の場合の文末三点リーダー。

f:id:yuzuhooo:20160603083043p:plain

こんな感じのやつである。

一行の場合、CSSで簡単にできてしまうのだけど、複数行になるといろいろとややこしい。特にメディアみたいなタイトルが何文字になるか分からないなんて場合はやっつけじゃいかなくなる。割と苦戦したのでメモとして残しておきます。

私はもしやるのであればJSでやる方法をオススメしたいです。CSSでやらないほうがいい理由は後ほど述べます。PHPは文字数で制限をかけるため、見た目を一切気にしてくれない、英数字の場合やフォントの種類によって文字幅が変わるから、うまく3点リーダーがつかない時があります。

なので私はJSでやる方法をオススメします。

Google先生に聞くと、複数行の場合CSSでやる「-webkit-line-clamp」が一番多い解答として出てくる。そもそも-webkitだとChromeとSafariしか使えない。IEは！firefoxは！となるとなんとも太刀打ちできないのが困ったところです。

しかも「display: -webkit-box;」のdisplay: box;のCSSはモダンブラウザのサポートが切れる。（てか多分もう使われていない。）そんなこんなで全然使えないし、よろしくない。

上記のブログのJQueryを使った方法ならいけた。横幅と高さはcss側で指定しないといけないので、横幅をパーセント指定とかだといけるかどうか分からない。

そもそも文末を三点にする意味っていうのはタイトルが続いてますよって感じなのかなと思うけど、JSまで使って複数行で三点にする意味とも思う。そのひと次第かな。