ワシはワシが育てる

週刊少年ジャンプと任天堂のゲームが三度のメシより好きです。

複数行のテキストに対してtext-overflow: ellipsisを実装する

一行のテキストが規定範囲を超えた場合に「…」をつけて省略する時にお馴染みの「text-overfolow: ellipsis」を複数行に対してかける方法について。

といってもtext-overflowはどう足掻いても複数行にかけることができないので、CSSで同様の表現をするための実装方法です。

文章で説明すると分かりづらいので図にしてみました。

f:id:washiiku:20140202232047j:plain

こんな感じで「囲い(#wrapper)」「テキスト(#text)」「…」の3つで構成されています。 それぞれCSSは以下のように設定します。

#wrapper {
  height: 300px;
  overflow: hidden;
}

#text {
  position: relative;
  height: 300px;
  z-index: 1;
}

#text:after {
  position: absolute;
  display: block;
  content: '…';
  width: 15px;
  height: 15px;
  right: 0px;
  bottom: 0px;
  background: #fff;
  z-index: 2;
}

テキストにafterをかけて、その右端に背景のある小さな領域を作り、そこに「…」を配置するという方法です。
z-indexで階層をつけることにより、あたかも「…」によって省略されたかのように表示することができます。

ただ実装するにあたり、テキスト箇所のheightは「font-size×line-height」で綿密に計算しないとブラウザ環境等によりはみ出したりするので、その点は注意しましょう。