[CSS3]p要素とtext-overflowを使ってキレイにレイアウトする

背中に蕁麻疹。
うまい具合にイスの背もたれで心地よく掻いています下山です。（傍から見るとモゾモゾ気持ち悪いオッサン・・・）

さて上の画像をご覧ください。
こんなレイアウトってよく使いますよね？ 使うんです。
divやli等でレイアウトする方が多いと思いますが、なななんと！p要素だけでできちゃうんです！ あ、もちろんCSS3使います。

以前IEで独自拡張されていたtext-overflowプロパティがCSS3で採用されていました。（IE6以上OKです。）
text-overflowプロパティとはテキストが表示領域からはみ出る場合の表示方法を指定するプロパティです。
値はclip(表示できるところまで表示する)とellipsis(表示できるテキストの後に3点リーダー(省略記号)を表示する)の2種類。
※表示できる領域とは幅(width)に依存します。 が、使い方によってはブロックの高さを揃えたいときに活躍できるプロパティです。 と勝手に決めつけてます。

demo

ではhtmlから

	

		

		マクロレンズで撮影

		マクロレンズで花を撮影するとこんな感じの写真になります。つまりファインダーを覗くと、そこは小人の世界。いいえちっちゃいオッサンの世界です。さあ！あなたもレッツマクロ！
	
	

		

		これはサボテンの花です。

		サボテンは話しかけるとよく育つとか言いますけど、それって病気です。サボテンなんかに話しかけてるところを彼女にでも見られようものならきっと・・・。とにかくこれはサボテンの花です。
	

CSS

.photo {
	float:left;
	width:300px;
	height:310px;
	padding:10px;
	margin:10px;
	border:1px solid #ccc;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
}

と、こんか感じです。 ちなみにブロックの数が増えてもheight:310px;が効いてるのでレイアウトを崩すこと無くキレイにまとまります。（ドヤッ

注意）改行を堺に1行づつtext-overflowしていくので、改行を含め複数行のテキストだと毎行「…」が付いてしまいます。

追記：text-overflowプロパティはopera9、10のみプレフィックスが必要です。