複数行のテキストに対してtext-overflow: ellipsisを実装する - ワシはワシが育てる一行のテキストが規定範囲を超えた場合に「…」をつけて省略する時にお馴染みの「text-overfolow: ellipsis」を複数行に対してかける方法について。 といってもtext-overflowはどう足掻いても複数行にかけることができないので、CSSで同様の表現をするための実装方法です。 文章で説明すると分かりづらいので図にしてみました。 こんな感じで「囲い(#wrapper)」「テキスト(#text)」「…」の3つで構成されています。 それぞれCSSは以下のように設定します。 #wrapper { height: 300px; overflow: hidden; } #text { position: relative; height: 300px; z-index: 1; } #text:after { position: absolute; display: block; co
