CSSで、はみ出るテキストを…でまとめたい

本に載ってたのでお試し。

確認ページ:ellipsis.html

…
<style type="text/css">
.ellipsis {
	/* 表示しきれないテキストを...で表示する */
	text-overflow: ellipsis;
	white-space: nowrap;
	-o-text-overflow: ellipsis;
	-o-white-space: nowrap;
	overflow: hidden;
}
</style>

<div style="width:200px; background-color:yellow;">
	<p>test test test test test test test test test test test test test test</p>
</div>	

<div style="width:200px; background-color:green;">
	<p class="ellipsis">test test test test test test test test test test test test test test</p>
</div>
…

参考サイト

関連エントリー

  1. フォームにうっすらとヒントを表示する
  2. SimpleAPIのWikipedia API
  3. WordPressでソーシャルボタンを設置したい
This entry was posted in 未分類 and tagged . Bookmark the permalink.