Topics

結構使われている？そうでもない？

使っている方も多いとは思いますが、あまり見かけないようにも思えます。
要は、要素をはみ出した文字部分を切ったり、「...」で補完したりするCSS3のプロパティなのですが、これ、案外便利だと思いました。

もともとはIEの独自拡張だった（未確認）ようですが、現行のブラウザではほぼ実装済みで、スマートフォンのブラウザ（iOSのmobile Safari / Android標準ブラウザ）でも問題なさそうです。

多くの場合は「省略されていることを明示する」という観点からも、省略した部分を「...」で補完するタイプが使われていると思うのですが、この「...」をあまり見かけないので、どのくらい使われているんだろう？と思っています。
ただ、Javascriptやサーバー側で文字数を指定して指定文字数を超えたら「...」を表示してテキストをトリミングしてしまうというのは結構見かけます。これ、見た目上の差はないわけですが、text-overflowに関しては複数行にわたって適用することができないので、大体区別がつきます。JSでやっている場合は元のソースと実行後のDOMに成形されたソースを比べればわかりますね。

使い道は？

どんな時に使うのか？その使い道は？ということになりますが、もちろんアクセシビリティの観点から濫用は避けたいところです。

一つ使ってみたのはパンくず。特に末尾です。
コンテンツのタイトルが長い場合やサイト内での階層が深くなりパンくずが長くなっちゃうことありますよね？
特にパンくずの末尾はそのコンテンツのタイトルや見出しと同じ情報が入っている場合が多いはずなので、ココを切ってしまったところであまりアクセシビリティへの影響はないと思います。

もう一つはスマートフォンのUIで、初めの1行だけを表示させて、その要素をタップすると全部の文字が表示されるというUIのコンテンツを作った時なんです。
というのも1行でもスマートフォンのデバイスの幅によって表示される文字数が違いますし、縦持ち（ポートレート）と横持（ランドスケープ）のViewportでは表示する文字数を適宜変えてあげたいわけです。

使い方

使い方はいたって簡単なのですが、このプロパティをつける要素は、

• 幅（widthまたはmax-width）を持っている、またはdisplayプロパティがblockである。
• overflowがhiddenである。
• white-spaceがnowrapである。

となっています。

パンくずの長い末尾をトリミングする。

HTML

下記のようなパンくずで、リストを横並びまたはインラインで表示しており、末尾の要素が長いときに省略しようとした場合、

<nav id="breadcrumbs">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/services/markup/">Markup</a></li>
<li>コンテンツのタイトルコンテンツのタイトルコンテンツのタイトルコンテンツのタイトルコンテンツのタイトルコンテンツのタイトル</li>
</ul>
</nav>

CSS

CSSはこんな感じです。

nav#breadcrumbs ul{}
nav#breadcrumbs ul li{list-style:none; float:left;}
nav#breadcrumbs ul li:after{content:'>'}
nav#breadcrumbs ul li:last-child:after{content:'';}
nav#breadcrumbs ul li a{padding:0 10px;}
nav#breadcrumbs ul li:last-child{padding:0 10px; max-width:15em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

最後のLI（nav#breadcrumbs ul li:last-child）の最大幅（max-width:15em;）をテキストが超えた場合、「...」を表示して（text-overflow:ellipsis）超えた分を隠します。

1行だけ表示した要素をクリック（タップ）で開閉する。

HTML

下記のような囲みの中を初期は1行だけ表示して、開閉する。

<section id="postSection">
<div id="postID0001" class="postItem">
<a href="#">投稿内容５投稿内１０投稿内１５投稿内２０投稿内２５投稿内３０投稿内３５投稿内４０投稿内４５投稿内５０投稿内５５投稿内６０投稿内６５投稿内７０投稿内７５投稿内８０投稿内８５投稿内９０投稿内９５投稿１００投稿１０５投稿１１０投稿１１５投稿１２０投稿１２５投稿１３０投稿１３５投稿１４０投稿１４５投稿１５０投稿１５５投稿１６０投稿１６５投稿１７０投稿１７５投稿１８０投稿１８５投稿１９０投稿１９５投稿２００投稿２０５投稿２１０投稿２１５投稿２２０投稿２２５投稿２３０投稿２３５投稿２４０投稿２４５投稿２５０</a>
</div>
<div id="postID0002" class="postItem">
<a href="#">投稿内容５投稿内１０投稿内１５投稿内２０投稿内２５投稿内３０投稿内３５投稿内４０投稿内４５投稿内５０投稿内５５投稿内６０投稿内６５投稿内７０投稿内７５投稿内８０投稿内８５投稿内９０投稿内９５投稿１００投稿１０５投稿１１０投稿１１５投稿１２０投稿１２５投稿１３０投稿１３５投稿１４０投稿１４５投稿１５０投稿１５５投稿１６０投稿１６５投稿１７０投稿１７５投稿１８０投稿１８５投稿１９０投稿１９５投稿２００投稿２０５投稿２１０投稿２１５投稿２２０投稿２２５投稿２３０投稿２３５投稿２４０投稿２４５投稿２５０</a>
</div>
</section>

CSS

CSSはこんな感じです。

.postItem{margin:0 0 10px; padding:0; border:1px #ccc solid; border-radius:8px; font-size:14px; line-height:1.5; padding:15px; background:#fff;}
.postItem a{white-space:nowrap; text-overflow:ellipsis; overflow:hidden; display:block; text-decoration:none;}
.postItem a.open{white-space:normal; text-overflow:none; overflow:visible;}

クリックできる要素（postItem a）をブロック（display:block;）として、テキストが超えた場合、「...」を表示して（text-overflow:ellipsis）超えた分を隠します。

Javascript（要jQuery）

JSはこんな感じです。

$(document).ready(function(){
	$('.postItem a').on('click',function(){
		$(this).toggleClass("open");
	});
});

クリックできる要素（postItem a）をクリックしてそのopenのクラスをトグルします。openのクラスでは、white-spaceをnormalに、text-overflowをnoneにoverflowをvisibleに、それぞれ元のプロパティを上書きします。

サンプル

サンプルはこちらです。