プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
css、文字列が表示幅をはみ出た場合「…」を表示して後ろを省略する。
幅が可変長のWebサイトで、文章を1行に収めたかったのです。
まぁぶっちゃけこのサイトなんですけどね。
説明部分が2行になると、かっちょ悪いので1行に収めたかったのですが、
可変長なので文字数で切るわけにもいかず。。

う~ん、なんか良い方法無いかなぁ、と探していたらCSSの

text-overflow:ellipsis

を見つけました。

ほんであれやこれやと調べた結果、こんなんでいけるらしいφ(--)

.hoge {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;

}

ちなみに、幅未指定だったりinline要素だと上手くいかないようです。

サンプルφ(--)

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお


これ、便利だなー。
IE8でも行けたし主要ブラウザでは一通り動いたし文句なしです。

完了\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事