レイアウトってホントに難しいですよね。ちょっとしたことで崩れる。
まあ、余程のことでは（トップページにaが百万個あるとか）たぶん「あ～なんかここ崩れてるなぁ～」くらいしか見に来た人は思わない、はず。
そこは人間のコンプレックスと同じように作っている本人が一番気にするんだと思います。
でしょ？
たとえばこんなの感じのパターン。
画像の下の文字の回り込みを解除したとしても、崩れるものは崩れている。でも…まだ見れる。しかし、この状態で一つ一つのリストにボーダーが付いている場合だとこのようになる。
この場合、タイトルを長くしてみたのだけど、実際ブログでよく見るのは記事の概要の長さが原因で崩れている。これは目立つ。
-webkit-line-clampで指定した行数に制限する
−webkit-line-clamp CSS プロパティは block container のコンテンツを指定した行数に制限することができます。
display プロパティに -webkit-box もしくは -webkit-inline-box が設定されており、かつ -webkit-box-orient プロパティに vertical が設定されている組み合わせのときのみ使用できます。
ほとんどの場合、 overflow に hidden を設定できます。そうしなければコンテンツはクリップされませんが、省略記号は指定した行数の後に表示されます。
引用:https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp
−webkit-line-clamp - CSS: カスケーディングスタイルシート | MDN
これは面白い。実際に入れてみようと思う。
例の如く、僕はGoogle Chromeを使っているので。コードを入れたい箇所にマウスカーソルを合わせて右クリックからの検証。そして画像の縦幅分の4行に指定する。
素で「へ～～」って言った。これが使えたら全然違ってくるんじゃないかと思うんですよね。
ただね、なんか反応が悪いというか。キャッシュなのか何かとぶつかり合っているのか、チェックをオンオフしても変化しない時がある。
まとめ
まあ、まとめと言ってもかりぱくみたいな感じでただコピペしてきただけなんだけど…
あ、そういえばとても愉快なWebサイトを見たんだった。この文字の回り込みで崩れることを回避するために、回り込んでいる文字のfont-sizeを2pxにしているところがあった。
めっちゃ小さい。そうはならない為にせめて回り込みの解除、もしくは行数の指定をしてほしいところ。ではでは。
