Nwht0xn1

テキストを折り返さずに省略するCreated on 2016-05-07 by r7kamura

コミュニティ一覧を見やすくしました - WikiHub Help で利用したCSSについて。

image

問題

上図のような段組のレイアウトでは、各要素の高さが揃わないと、レイアウトが崩れてしまうことになる。コミュニティの説明文の部分が可変長であり、そこが複数行になると問題が発生してしまう。

対策

今回は、以下のようなスタイルを定義して説明文の部分のブロック要素に適用することにした。

.text-ellipsis {
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

下図は適用後の結果。

image

課題

課題として、このような雑なCSSで良いのか、IEはどうするのかといった問題がある。もっと品質を上げるなら、:after擬似要素などで対応するのが良いと思われる。

追記

最近のブラウザではprefixは要らなくなっているという意見を頂いた。text-overflow - CSS | MDNCan I use... Support tables for HTML5, CSS3, etc で調べたところ、確かに最近のブラウザでは対応しているので、以下のコードを利用するのが良いらしい。

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}