2013年11月6日

文字を省略させるためのCSS「text-overflow」

text-overflow

ニュースサイトでの記事一覧、ECサイトでの商品一覧などで、長い文字は1行分だけ表示させれて文末に「…」を付ける。これはよく使われる表現ですね。この文字省略を実現するにあたり、PHPやJavascript等で文字数をカウントし、指定した文字数を超えた場合は「…」を付けて文字を省略する、という手法がよく使われるかと思います。しかしPHPやJavascript等のプログラムで制御せずとも、CSSで実現する事ができます。

text-overflow

このtext-overflowプロパティは「決まった横幅を超えたら省略するよ」という便利なプロパティで、実際に使用する場合はwidth、overflow、white-spaceなども同時に指定します。まずHTMLをこんな感じで記述します。

<p class="text_overflow">text-overflow は文字列を省略するためのプロパティで、指定した横幅に達すると文末に「…」が付くのです。</p>

続いてCSSはこのように記述します。この例だとpなのでブロック要素ですが、ブロック要素以外に指定する場合は下記に「display: block;」を追記してください。

.text_overflow{
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

一応Google Chrome、Safari、Opera用のベンダープレフィックスも付けています。こうする事でコンテンツ幅100%を超えた文字は省略されて「…」が付くようになります。実際の表示は下記のようになります。

text-overflow は文字列を省略するためのプロパティで、指定した横幅に達すると文末に「…」が付くのです。

text-overflowだけ覚えておけば良いですか?

いえ、そういう訳ではありません。というのも、text-overflowは基本的に複数行に対応していません。途中で<br>を入れておけば表示はされますが、という内容なので、原則1行表示のために使用します。そのため、「2行程度で省略させる」という仕様には向きません。そんな時はPHPやJavascriptを使用しましょう。

用途が合えばとても便利なCSSプロパティ「text-overflow」のご紹介でした。

,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です