【CSS】指定した幅を超える文字列をトリミングして3点リーダ(…)に置き換える【覚書】

【CSS】指定した幅を超える文字列をトリミングして3点リーダ(…)に置き換える【覚書】

はじめに

コジマです。

覚書なので、先に参考URLを書いておきます。

CSS で指定幅を超えた文字列を切り取り「…」を付加する方法

ほんとに助かりました。ありがとうございます。

サンプル

<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>文字列をトリミングするサンプル</title>
<style type="text/css">
<!--
div{
    width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
--> 
</style>
</head>
<body>
    <div class="display-area">
    この文章がトリミングされることのテスト
    </div>
</body>
</html>

こんな表示になります。

ただ、このままだとソースパクって改変したやつになってしまうので、
この仕組みについて説明したいと思います。

解説

width

文字列を表示したい領域を指定します。
用途に応じてお好みで数値を変更します。

white-space

タグ内の文字列のホワイトスペース(連続する半角スペース・タブ)及び改行の表示方法を指定します。
nowrapとすることで

  • ホワイトスペースを無視
  • 改行を1つの半角スペースとして表示
  • 自動改行しない

とすることができます。

その他の設定値の説明は以下リンク参照
http://www.htmq.com/style/white-space.shtml

overflow

枠からはみ出た時のはみ出た部分の表示方法を指定します。

hiddenとすることではみ出た部分を非表示にできます。

その他の設定値の説明は以下リンク参照
http://www.htmq.com/css/overflow.shtml

text-overflow

領域からはみ出た内容をどのように知らせるかを設定します。

ellipsisとすることで領域からはみ出ていることを3点リーダで置き換えて知らせます。

ちなみにellipsisというのは「省略」という意味の英単語です。

その他の設定値の説明は以下リンク参照
https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow

さいごに

まとめると

  • 領域を指定する(width)
  • 自動改行しない(white-space)
  • はみ出た部分は非表示(overlow)
  • はみ出たら3点リーダ表示する(text-overflow)

とすれば願いが叶います。

JavaScriptでゴリゴリつくろうとか考えてしまっていたので
CSSのありがたみを痛感した1件でした。

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです!

以上、コジマでした。


HTML/CSSカテゴリの最新記事