ホームページ内に表示するテキストでデータベースから値を取得してページに出力する際に、
表示する文字数が表示領域よりもオーバーしてしまうことがあります。

PHPやJavaScriptを使えば表示する文字数を指定して取得したテキストを省略表示することができますが、CSSでもオーバーしたテキストを省略して表示することが可能です。
CSSで省略表示する場合は「text-overflow」プロパティを使います。

「text-overflow」を使用すると表示する幅に合わせて、テキストを省略することができるので、
ブラウザのサイズが変わった場合やレスポンシブ対応のホームページでも有効だと思います。

「text-overflow: ellipsis;」でテキストを省略表示

使い方は簡単で省略表示したい領域に対し、下記のスタイルを適用するだけです。

「text-overflow: ellipsis;」以外に「overflow: hidden;」と「white-space: nowrap;」のスタイルも適用させます。
「overflow: hidden;」ではみ出した部分を表示しないようにします。
「white-space: nowrap;」で連続する半角スペース・タブ・改行を半角スペースにします。

実際に書く場合は下記のような感じです。

CSS

HTML

サンプル

下記のページにサンプルを用意しました。

CSSの「text-overflow」を使用したデモページ

また、省略記号を好きな文字列にしたい場合は下記のように記述します。

まとめ

今回はCSSのtext-overflowプロプティを適用して表示領域からオーバーしているテキストを省略表示する方法をご紹介しました。

表示する範囲を決めていて、出力するテキストの文字数が異なる場合などに利用できると思います。
例えば、ブログでは一覧ページで表示している記事のタイトル、又はパンくずなど、表示するテキストが長くなってしまった場合に省略して表示することができます。

是非、活用してみてください。