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

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

…
<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>
…

参考サイト