はじめに
コジマです。
覚書なので、先に参考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とすることで領域からはみ出ていることを３点リーダで置き換えて知らせます。
ちなみにellipsisというのは「省略」という意味の英単語です。
その他の設定値の説明は以下リンク参照
https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow
さいごに
まとめると
- 領域を指定する（width）
- 自動改行しない（white-space）
- はみ出た部分は非表示（overlow）
- はみ出たら３点リーダ表示する（text-overflow）
とすれば願いが叶います。
JavaScriptでゴリゴリつくろうとか考えてしまっていたので
CSSのありがたみを痛感した１件でした。
この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！
以上、コジマでした。
