【CSS】入りきらない文字列を三点リーダ（…）にする方法
画面上に文字列を表示すると長文になってしまって2行になったりスクロールバーが表示されたりでデザイン上困ることがあります。
対処しようとして文字数で区切ってしまうと、半角、全角でとても面倒なことに・・・
これに簡単に対処する方法がCSSの「text-overflow」プロパティです。
サンプルコード
CSS
.sample{
white-space: nowrap; /* 単一行のみ対応 */
max-width: 100px; /* 幅設定 */
overflow: hidden; /* "overflow" の値は "visible" 以外のものを指定する */
display: inline-block; /* 表示設定 */
-o-text-overflow: ellipsis; /* Opera 9-10 */
text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */
}
HTML
<div class="sample">あいうえお</div> <div class="sample">1234567890</div> <div class="sample">あいうえおかきくけこ</div> <div class="sample">1234567890ABCDEFGHIJ</div>
サンプル
実際にサンプルコードを使用して、サンプルになります。
少々わかりやすいように色付けなどはしています。
あいうえお
1234567890
あいうえおかきくけこ
1234567890ABCDEFGHIJ
結果を見ると3番めと4番目が自動的に三点リーダ（…）になっていますね。
ちなみに以下が私が参考にしたMDNの説明です。
これでわざわざ文字列を文字数で区切る処理が要らないので手間が少なくなります。
全部プログラムを組むだけではなくCSS等でも楽に出来るか模索してみると面白いです。
