nice欄をちょっと修正

以前、最近のnice欄をコンパクトにという記事を書きました。
その時に、名前が長い人がどう表示されるか分からなかったので放置していましたが
長い名前の方がいらしたので見てみました。


見事に重なっちゃってますね。

これだと双方共に申し訳ないので、少し手を加えてあげると



こうなります。領域以上の文字列は「…」表示に変更。
以下、やり方です。
難しいことはありません。CSSのみで出来ます。

#favoredMember li {
float:left;
width:95px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

青文字の部分を追加するだけです。
赤文字の部分はユーザーによって違うので変更してください。
テンプレートによりますが、恐らく初期設定は180pxくらいだと思います。

また、「#favoredMember li { ～ }」がCSS上にない場合もご自身で追加してください。
私は「/* nice! */」の中に入れています。
※So-netブログでの記述なので、他のブログでは「#favoredMember」ではない場合があります

必要な記述は

・width
・white-spce: nowrap;
・overflow:hidden;

の3つです。

その他にある

「text-overflow: ellipsis;」はInternet Explorer6以上とSafari、Operaに対応していますが
Safariでは「-webkit-text-overflow: ellipsis;」と記述し、
Operaでは「-o-text-overflow: ellipsis;」と記述するのだそうです。

細かいことが良く分からない場合はコピー＆ペースト（貼り付け）で問題ないと思います。
これで見やすくなった…かな？ヾ(・ω・)ﾉ

タグ：ソネブロ ブログ CSS 文字列省略