ブログを更新してるって事はわりと仕事が落ち着いている時！
良いのか悪いのかは分かりません。
して、さすがに、前のネタはビミョー過ぎたかな！とか思いつつも今回も特に珍しいネタではないですが、メモがてら。
随分昔に、似たような記事を書いてますが、あっちは使い勝手が悪いので、今回はちゃんと使えそうな方法です。
使いドコロとしては、パンくずリストとかスマホ対応の記事一覧とかでしょうか。
サンプルは下記よりご覧ください。
重要になってくるのは、以下の3つのプロパティです。
ul li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
どれか一つでも無いとダメなので、セットで書くようにしませう。
わりとIE6でも...にはならないけど、切ることは出来たりと対象ブラウザも広いです。
パンくずリストで使う場合は、2行になるとデザインが破綻しやすい場合とかで、横幅がしっかり有るケースですね。
主要な部分で切れちゃったら意味を成さないので、階層がすごい深いサイトでは使えないと思いますが、3階層程度で、ブログのエントリータイトルとかが入る場合はぶっちゃけ全部見えなくてもそんな困らないので、キレイに1行で収めるのも良いかなと思います。
お、この位のネタなら30分も掛からないで書けるから(・∀・)イイネ!!