タイトル通りで、特定の行数以上の文字をカットして三点リーダーを表示するCSSの調整方法について・・・それが効かないときの対処方法についても書きたいと思います。
クライアントサイドだけの調整は、以前はjsで対応していたのですが、最近は顧客から特定行数での指定が増えたり、
外国の方向けに英語の表記のときの文字省略対応がくるようになりました。
英語だったり日本語のみだったり混在だったり、JSだと考慮が大変すぎるし、長くても5行以内がいいといった要望もあり。。。
レスポンシブが当たり前なので、jsの文字数制限では要望に応えることが難しく、余分な処理やテスト工数も増やさなくて済むので最近はすっかりCSSでの調整ですすめてます。
そんな中、どうしても効かずに原因を突き止めるのに数時間もかかったことがあったので、備忘録として残すことにしました。
まずは振り返ります。
.leave-txt {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
調整方法は本当に簡単で、「-webkit-line-clamp」の数字を指定したい行数に合わせて変える形。
すっごく簡単なのにね！それがね！iOSで確認すると効かなかったことがあったのですよ・・・
先祖要素にコイツ↓が効いていたせいで文字カットのCSSが効かなかったのですが、
visibility: hidden;
先祖要素だったから気づきにくかったのもあるのですが、よりにもよってそのときは読み込み時のアニメーションに非表示をvisibility: hidden;で指定していて、ページロード後はvisibility: hidden;効いてないんですよね。
そんな状況だったので、余計に原因が分からずで・・・。気づいたときにはページロード後はvisibility: hidden;効いてないのにマジ・・・？って感じでした。
そのときは必死だったけど、苦労して勉強になったといえど、もう同じ状況に陥りたくないので、今回備忘録として残すことにしました。
iOSで確認したときに気づきましたが、おそらくsafariすべてかと。
発生した現象の原因をまとめると、
原因が分かれば解消するための別の方法を考えるのみなので、対処はかんたん。
無事に表示でき、解決なのですが納期前になかなか気づかないと本当にほかとくらべられるものがないくらい焦る～～～