CSSのtext-overflowではみ出したテキストを「…」表示

CSSのtext-overflowでellipsisを指定すると
はみ出したテキストを、javascriptや、jsp、phpなどを使わなくても省略表示できます。
意外とIEでも6から対応しているので、仕事でも心置きなく使えます。

text-overflowを有効にする4つの条件

text-overflowは、表示領域からテキストがはみ出した場合
末尾に省略記号の「…」を表示するかどうか指定するCSSプロパティです。

そのため、text-overflowが表示領域とはみ出しを認識できるよう
幅指定で「表示領域」をつくって
改行禁止やはみ出し禁止で「はみ出す」概念を準備しないと効果がありません。

  1. 幅指定が有効になるようdisplayは inline以外を指定
  2. width か max-width min-width で幅指定(auto以外ならリキッドでもOK)
  3. white-space: nowrap; を指定
  4. overflow: hidden; を指定

実際のソースはこちら。

.news-list {
	list-style: none inside;
	width: 300px;
	margin: 0;
	
	border-top: 1px solid #000;
}
	.news-list li {
		list-style: none inside;
		padding: 3px 0;
		
		border-bottom: 1px solid #000;
	}
		.news-list li a {
			display: block;
			width: 100%;
			overflow: hidden;
			
			text-overflow: ellipsis;
			white-space: nowrap;
		}
<ul class="news-list">
	<li>2014/05/10 <a href="#">制作日誌更新!ある日のランチ風景をレポート!</a></li>
	<li>2014/05/08 <a href="#">movieに予告編xx版を追加しました</a></li>
	<li>2014/05/05 <a href="#">制作日誌更新!主演のxxxxさんを直撃!</a></li>
</ul>

参考:
text-overflow – CSS | MDN

関連記事

Pocket