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; を指定

実際のソースはこちら。

<br />
.news-list {<br />
	list-style: none inside;<br />
	width: 300px;<br />
	margin: 0;</p>
<p>	border-top: 1px solid #000;<br />
}<br />
	.news-list li {<br />
		list-style: none inside;<br />
		padding: 3px 0;</p>
<p>		border-bottom: 1px solid #000;<br />
	}<br />
		.news-list li a {<br />
			display: block;<br />
			width: 100%;<br />
			overflow: hidden;</p>
<p>			text-overflow: ellipsis;<br />
			white-space: nowrap;<br />
		}<br />

<br />
&lt;ul class=&quot;news-list&quot;&gt;<br />
	&lt;li&gt;2014/05/10 &lt;a href=&quot;#&quot;&gt;制作日誌更新!ある日のランチ風景をレポート!&lt;/a&gt;&lt;/li&gt;<br />
	&lt;li&gt;2014/05/08 &lt;a href=&quot;#&quot;&gt;movieに予告編xx版を追加しました&lt;/a&gt;&lt;/li&gt;<br />
	&lt;li&gt;2014/05/05 &lt;a href=&quot;#&quot;&gt;制作日誌更新!主演のxxxxさんを直撃!&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />

参考:
text-overflow – CSS | MDN

関連記事