saikoの日記帳

技術
2018.11.30

複数行の文末3点リーダー省略「line-clamp」で省略がされないバグ

line-clamp

仕事で憤慨したので珍しく技術エントリです。

世の中のニュースサイトとかブログサイトでは、度々「文末省略」が用いられます。 ググればいくらでも出てくる、text-overflowとかのことです。 これを使えば文末に3点リーダーを持ってきて、文章を省略することができます。

1行ならな!

2行以上になると、また別のプロパティを用いる必要が出てきます。 それが「line-clamp」。

-webkit-line-clamp: 3;

ってのとそれ専用のプロパティを指定してあげると、line-clampの数の行で3点リーダー省略してくれます。 超有能。

しかしやはり制約はつきもので、webkit系ということもあってかIEやFirefox(?)などでは使えません (火狐は違ったかも)

それに正直使用は推奨しないのがこれのビッグ・問題点です。 なぜならおそらくは今後制定されることのないプロパティだからー! ほぼ仕様版的な感じで、なおかつもう開発されることはないと思ったほうがいいです。 なので人間ならおとなしくPHPとかJSで区切るようにしましょう。 どっちもある程度の制約もありますが、ちゃんとプログラムでやったほうがいいよ。

【本題】line-clampで区切れない場合がある

まずはこちらをご覧ください。

See the Pen line-clampで区切れない場合があることの説明 by 【LIGHT WINGER】 saiko (@saikofall-the-typescripter) on CodePen.

このコードを簡単に説明すると

・メニューの切り替えタブと、中身のタブがある ・タブ1/2/3をクリックすると、対応した中身タブの表示が切り替わる

っていうだけのものです。 使い道としては、ちゃんとデザインすればタブ切り替えメニューになったりします。 最近だとサイドバーに表示するミニランキングとかそういうの?

さてここで本題、見りゃわかるんですが、タブ2をクリックして表示させますと、なぜかline-clampが効いてない状態でタブが表示されます。 もちろん、3つのタブすべてに同じcssを適用しており、理想の表示としてはタブ1のようになるものとします。

で、これを調べてたのですが、どうもwebkit系特有のバグ?だそうですね。 というわけで下記の2ページを参照。

マルチラインのラインクランプ(省略記号)は、私は、H3タグにこのクラスを適用 -webkit-line-clamp is not respected when visibility is hidden

どちらも英語ページですが(上のは無理くり日本語翻訳されたもの)、言ってることはひとつです。 どうやら、line-clampは再描画?が上手くされないらしいです。 今回上のメニュー切り替えでは、隠れているものには「visibility:hidden」が設定されています。 それを切り替えタブクリックでvisibleにしているわけですね。

ですのでレンダリング時点でvisibleがhiddenしてるってのが原因だそうです。 これはwebkitのバグとして認められているのでどうしようもありません。 諦めろん。

ただし、解決策がないわけではなく、その要素を「hide().show()」とかで再描画すると直ります。 だから開発者ツールでline-clampを付けたり消したりするとなぜか直るっていう現象が起こったりするわけですが。 やってはないんですが、もしかしたらvisibilityじゃなくてdisplay:noneとかなら影響が出ないかもしれませんね。 アレも多分再描画だし。 でも色々とcssの動きが面倒になるのでやっぱりhideとshowとかで再描画させてあげたほうが楽かも? クソ雑魚js使いなので正直正しいかもわからんっす。

ぐち

ぼく思うんですけど、そもそも3点リーダーの省略やめようぜって。 だってアレ面倒なだけじゃないですか。

css → できないのとできるのが多すぎ、そもそも制約デカすぎ php → 文字数制限があって日本語だと微妙、バイト制限でやっても結局多少のズレは発生する js  → 重すぎ、一番綺麗にできるけど負荷が半端ないので現実的じゃない

っていう問題児なので、もし省略を誰かに頼むときは

「なんかこう、下のほうがグラデーションで消えてく感じで省略してほしい」

って頼みましょう。 下白のグラデ掛けるだけでなんとかなるので作るほうとしては非常に楽です。

あとこれは個人的な意見ですが、見栄えが「...」よりもグラデでスッと消えたほうがいいと思います。

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

同じカテゴリの他の記事

新着記事