CSSで文字列を省略して末尾に「・・・」を付けて表示する方法 - Qiita

#target{ max-width:80px; /* 最大80px */ white-space: nowrap; /* 改行を半角スペースに置き換える */ overflow: hidden; /* はみだした部分を削除する */ text-overflow: ellipsis; /* 末尾に「…」を付加する */ }