はじめに
コジマです。
覚書なので、先に参考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)を
フォローしてくれたらうれしいです!
以上、コジマでした。