Uni-Q blog

うにきゅう ぶろぐ

テキストがはみ出た時に省略して「…」を表示するCSS

  • 「text-overflow:ellipsis; 」とか使う。
  • CSS3
  • はみ出たのは隠しちゃう!っていうcssも入れる
  • 改行無効もいれる
.hage {
  white-space:nowrap; //テキスト改行無効
  overflow:hidden; //width幅からはみ出た要素を隠す
  width:320px;
  -webkit-text-overflow: ellipsis; // Safariで省略... 
  -o-text-overflow: ellipsis; // Operaで省略... 
  text-overflow: ellipsis; // IEで省略... 
}

http://www.w3.org/TR/2002/WD-css3-text-20021024/#text-overflow