複数行の文末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  → 重すぎ、一番綺麗にできるけど負荷が半端ないので現実的じゃない

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

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

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

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

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

関連記事

2020.05.27
やっとSuでエンドレスロナー取れました #pso2

やっと…エンドレスクエストが終わるんやな… あああああああああ!!!!うわあああああああああああああ!!! もう頑張らなくていいんだ…。地獄のような日々から解放されたんだ…。 お前のことが好きだったんだよ!!! エンドレスロナーになりました 今更?って言われるかもしれないのですが、エンドレスロナーを取得しました。職はもちろんSuです、ていうかそれ以外できないです。やったこともねえし、これからもやることねえな! エルダー出なかったからセーフみたいなとこはありますが、マガツ引いて弱点ナベチ引いてそれでも取れたんだから十分でしょう! ちなみにですが、レドラン軸でした。レドランくん作っといて放置してましたけど、クソ強ですね、エンドレスにおいては。助かる。 反省点 その1 レドラン途中で落ちたご存知の通り、レドランくんの性格バフは「AISに乗る」「ダークブラストする」「死ぬ」「別個体ペットに変更する」でリセットされます。エンドレスクエストをレドラン軸で動こうとした場合、これらが起きたらほぼリセットです。ただ、幸いなことにアースガイド前だったので予備で持ってきてたマロンとシンクロウで対処できたので、多分リカバーはできたはず…?それでも結構痛かったです。 その2 焦ってグダグダなプレイした所々でグダりまくりでしたね。レドランくんは微妙に動きにバグがあって、たまにPAを撃ってくれない時とかがあります。それを防ぐために通常攻撃を挟んだり、ロック対象に気を遣ったりするのですが、完全に焦りで飛んでましたね。レドランが急に動かなかったりして頭がフリーズしたりしてました。ダメだって。 その3 魔神城予習不足ラスト、動きの練習をしてないせいで一番グダりました。一応30秒だか15秒だか残ったのでセーフでしたけど、余らせた5分30秒をフルに使ってしまったのが怖かったですね。魔神城、どこで使えばいいのかさっぱり覚えてなかったのでニフタ未使用です。開門時、ちゃんと使おう! 感想 2年越し?のエンドレスロナーです。実装時はこんなん無理やろ…と思ってましたが、環境の変化などのおかげで取得完了しました。いやーでもめっちゃ頑張ったと思いますよ、実際。 ユニットはファクターとかの難しいものは一切使ってないです、ぼくがユニット作成下手なので。それでもステ200とPP10は盛ってたので、それが良かったのでは説はあります。 武器はレドランザラ、シンクロウリュクロスの2つ持ちでした。まあSuなら常に持ってるやつですね、必須品(ザラはザラじゃなくていいけど)。 肉野菜炒めは使いましたが、ロナーなった回でしか使わなかったのであまり実感できなかった感じ。実際どのぐらい変わるんですかね、アレ。 急遽レドラン軸に変更しての挑戦でしたが、エンドレスロナー取れて良かったです、本当に良かった。 一応まだフォーエバーロナーとか意味わからん称号とかがありますが、その辺りに挑戦するのはまだまだ先の話だと思います。少なくとも魔神城突入で5分しか残せないのなら論外なんじゃないっすかね。 とりあえず、これから暫くはユニット更新を目標として生きていこうと思います。良いの作ろうね❤

デフォルト画像
2018.10.07
豚キムチコラボのやつ

今日から一日三食豚キムチ! この前からやってる謎のPSO2と豚キムチのコラボ。 そういえば10月に入れば出回るんだなと思い出し、買ってきました。 ローソン行ったらたくさんあったので、とりあえずで2つほど購入。 やだこわい…。 コンビニ限定品になりますので、お値段はお高め200円ちょっと! 豚キムチなんてドンキ行けば100円ちょいで売ってるのにね。 ていうかPSO2はドンキともコラボしたんだから売ってくれたっていいじゃないの。 これは個人的な感想に過ぎないことなんですけど言ってもいいでしょうか。 豚キムチって別に対して美味しくないですよね(スーパーカップ)。 戦争になりそうなことは言いたくないんですが、豚キムチ要素が少なすぎるんですよ。 別に味が悪いわけではないんですが、なんかラーメンとキムチが入ってるってだけで…。 これを一日に三食も食える人は尊敬します。 せめて一食にしたほうがいいと思いますよ。 意外と出来が良くて驚きましたよ? 2つ購入し、早速開封。 嬉しいことにステッカーとロビアクが手に入りました。 正直ロビアクさえ手に入ればいいやと思ってた所ですので、僥倖僥倖。 頭乗りこぶたはいらないっす。 そんで試してみたんですが、思った以上に完成度が高くてビビりました。 PSO2側も案外頑張ったのですね。 (いつも思うけどPSO2側が妙な所を頑張りますね) かわいい! 男性版のほうはポーズ決めてて意外と好きだし、 女性版のほうは待ってる間と派生後の食べてる所どっちもかわいい。 これ、ロビアク勢は持ってたほういいと思うんですがどうでしょうかね! 豚キムチ食べてるスクショ撮れよ! スクショ撮れよ! 緊急の待ち時間とかでこのロビアク多用していきたいと思います。 あ、もう豚キムチは食べないです。 それでは今日はここらでサヨウナラー

2021.01.30
ブログ改造計画実行!

デザイナーの個人講習会受けた 本日、土曜にも関わらず仕事をしに行ってたんですよ。事前にわかっていたことではあるんですが、ウチのデザイナーも仕事があったみたいで、出社していまして。ある程度仕事したら、段々と飽きてきたので雑談していたんですよね。 そしたらですね、ふとした拍子にデザインの話になりましてね。ぼくはデザインのことなんてからっきしで、基本的にできることと言えばフロントエンドのことかバックエンド、Wordpressとかぐらいなんです。そこで試しに、ロゴとかってどうやったら良い感じに作れるのかを聞いてみたわけです。 そこからはもう現役デザイナーによるデザイン講習会みたいな感じで、主にタイポグラフィについてのお話になりました。デザインセンスとかなんて関係なく、こんな感じにすればそれっぽくなるんすよ~、ということで色々色々…。 そのまま実践編ということでぼくもやってみることになったので、直接指導してもらいながら作ったのが、これ。 デザイナーってすごいっすね…。 ロゴができちゃったね!ということで、ついでにブログの構造自体も色々変えました。また、サムネイルにも相談したらなかなかそれっぽいアドバイスをもらったので、早速反映させています。 とてもそれっぽくなった気がするね…。 定期的にこういう講習会やってくれねえかな…。 ぼくはデザイナーではないですが、こういうのは個人的にやってるこのブログとかに、色々とフィードバックができるので定期的に教えてほしいですね。やはり何を考えてデザインしてるのか聞くだけでもタメになるんで…。 とはいえ、デザイン系のセミナーに行った所で今日みたいな経験値を得ることはできないんですよね。ぼくが望んでるのは直接目の前でフィードバックをもらうことなんですよね。家庭教師みたいなもんで。 今日のは報酬なしで、ちょっと暇になったからやったという程度の話なのですが、今度何かお礼をしたほうがいいかもしれませんね?飯奢るぐらいじゃ返せないぐらいの何かだと思うんですが(正論) 今度からは商品ロゴとかを意識して見てみよう!とか思いました。多分ぼくだけで見たところで、何も得られるものはないんでしょうが。