saikoの日記帳

技術
2019.10.15

文字列の省略は「shave」を使うというライフハック

悩んでないでプラグイン使ってホラ

webやってると、文字列の省略を求められることがあるんですよね。
そういうときの解決策としては、IEを切り捨てていいのなら真っ先にCSSの-webkit-line-clampとかが選択肢に現れます。
ただ、大抵のクライアントはIEくんの救済を求めてきます。

「IEだと三点リーダーが出ないんですけど、これバグですか?」

オメェの頭がバグってんだよ!!!!
その小せえ脳みそ使ってIEのシェアについて考えてみろや!!!

ということも言えるはずもないので四苦八苦、口八丁、あの手この手でのらりくらりと解決するはず。

そんなことしねぇで、よほどの事情がない限りはプラグイン使おうぜ。

Shave

jsで上手く文字列省略を実現してくれるのがshaveくんです。
この前見つけて使ってみて案外使いやすかったです。

shave
https://dollarshaveclub.github.io/shave/

shave – git
https://github.com/dollarshaveclub/shave

ダウンロードしたファイルを解凍して「dist > jquery.shave.js」が目的のブツになります。
ぼくはjQueryに頼らないと生きていけない人間なので、jquery.shave.jsを使います。

使い方は至極簡単で、誰もが知ってるjqueryを何らかの方法で読み込んだ後、そのままの勢いで上記のjquery.shave.jsも読み込んでください。

デモ
https://www.saikofall.com/test/shave/

一応デモ用でページ作ってぽいっとしました。
この3つのデモは下のソースで動いています。

あら簡単。
1番目と2番目の違いは、ウィンドウサイズを小さくしたり大きくしたりするとわかると思います。
わからない人はセンスのない人です。
何年ネットサーフィンして生きてきたの?

jQueryで使うつもりなら、指定したい要素にshave(高さ)という関数を与えれば動きます。
リサイズとかで動くようにすれば更に良い感じになるんじゃないですかね。
(ぼくはそうしてる)

数値は高さを指定する形になるので、基本は高さ固定です。
そもそも省略するときは大体高さ固定だし、多少はね?

注意点

軽い説明記事みたいになりましたが、注意点があります。
これ、多様すると多分重くなると思います。
中身解析してみたわけではないので一概には言えませんが、jsでの文字省略って結構重かった気がするんですよね。
しかもshave自体、2,3年前とかの古いプラグインだし…。

ページ内の要素で3つ4つぐらいをresizeでかけるぐらいなら大丈夫だと思います。
実際、最近そういうのをやったときは問題なく動いたんで。

まだ試してはいませんが、今度どのあたりが限界点になるのか試してみたいと思ってます。
リサイズするたびに止まるぐらいには重くなると思うんだよな…。

まあ、個人的には多ブロックでも使えて死ぬほど使いやすく思ってるのでメモもかねて説明記事にしました。
自分の引き出しにできれば最の高ってやつで。

それでは今日はここらでサヨウナラー

同じカテゴリの他の記事

新着記事