語尾に…をつけたい
カテゴリページやTOPページの記事一覧、アーカイブページなどで抜粋文が長くて装飾が崩れてしまったりとか、ちょうどいい分長さで切りたいのに、phpのどこに書かれているのかわからない時の必殺技。
もちろん探して条件を足した方が良いのだけど、時間が無くて急ぎで対応しなきゃいけない時はこれ。
使い方
5行入れるだけでいいのでめちゃくちゃ簡単にできます。
何行目で切るかは最後の行の「-webkit-line-clamp: 2」の数字を変更すればOK
抜粋で切ったところの後ろは「…」になります。
p{
overflow: hidden;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
使う時の注意点
注意点として、指定する行まで文字が入っている前提なので、2行目の途中までしかないのに、2行目で指定しても、語尾には三点リーダーはつかない。
あくまでも複数行ある中の何行目で削除するのか、という指示の仕方をしなくてはいけないので、注意が必要です。
また、スマホサイズになったときは、さらに注意が必要。
行数で消してしまう状態なので、レスポンシブサイトではspサイズで折り返しが増えますよね。
そうなると、PCサイトの時はちょうどいい100文字程度でよかったという場合でも、スマホサイズで30文字しかないということもあり得ます。
スマホサイズのブレイクポイントで行数を変えておけば、適度な状態を保てるので忘れずにセットで入れるようにしてください。
また、分かっていることだけど、もう一度きちんとclassを見るコト。
念を押す理由は、投稿記事や固定記事の中身がなくなってしまったと勘違いしてしまうこともあるためです。
誤って全体のpに付けてしまうと、コンテンツ記事が2行で切れてしまっていて、記事自体を消してしまったかのように見えてしまいます。ほぼ空の記事だらけになってしまうので、指定するclassには最新の注意はらって使用してください。
まとめ
人間にはきれいに抜粋として調整されていると見えますが、ロボットさんには無理やり消しているように見えてしまうので、一時的な調整に向いています。
一旦これを入れて対処している間に、抜粋の指示が書かれているところを調べて対応しましょう。