menu

Web制作のTipsとかアレコレ。

CSSで「…」をつけて文字数を丸める

2014.08.11

前に抜粋がパラメータを取らないので、自力で文字数を丸める。という記事を書きましたが、これは比較的長いテキストの入ったパラグラフに対してやった処理でした。

今回は、もうちょっと簡易に、一行とかのテキストのはみ出しや改行を防ぐ程度の目的で文字数を丸め、後ろに「…」を付けるというのをCSSで実装します。

やり方は簡単で、例えば

<p class="inner">ある日、森の中で熊さんに出会ったのです。</p>

というhtmlがあったとすると、

.inner {
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

としてやるだけです。
あ、text-overflowに関しては各ブラウザのベンダープレフィックスも付けておいた方がいいですね。

このスタイリングが重要になる局面ってのは、今の時勢だと、「レスポンシブデザインでどうしても改行させたくない部分があるとき」ってのが僕の場合は多いんですが、レスポンシブの場合は、
まず、外側を覆うdivを付けてやって、ここにwidthを設定してやり、テキストのp要素にはwidth:100%;を設定するようにしています。別にdivで囲む必然性があるってわけじゃないのですが、その方が全体としては作業がやりやすくなるという経験則ではありますが。
htmlは

<div class="outer">
    <p class="inner">ある日、森の中で熊さんに出会ったのです。</p>
</div>

で、cssは(.outerの幅が30%だと仮定して)

.outer {
    width: 30%;
}
.inner {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

こんな感じでしょうか。

ただ、末尾に付く「…」の色まで指定できないので、デザインによっては妥協が必要になるケースもあります。

Comments

please leave your comment...

▲ Page Top