Learning site for website creation

最終更新日から1年以上経過しています

決められた範囲を超えたら「…」

  • 投稿日:2014年03月29日
  • 更新日:2014年04月02日

一覧表示などで抜粋を表示する時に便利で、CSSのみで表示制限ができる。
しかも、コピーした時は全文コピーになる。

text-overflow: ellipsis;

JavaScriptで文字数調べたりしなくていいじゃん。と思ったが、同時に「white-space: nowrap;」と「overflow: hidden;」を併用しないと機能しなかった・・・。
ということは、使いどころは一行表示の時だけ・・・。うーん。

「width: 100%;」はIE6対策。もうやらなくていいか。

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%; /* IE6対策 */