ニュースサイトでの記事一覧、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」のご紹介でした。
