MRRI

text-overflow: ellipsisとは？

CSSのtext-overflow: ellipsisは、コンテンツが要素の幅を超えた場合に末尾を「…（省略記号）」で切り詰めて表示するプロパティです。
UIをすっきり見せたいときや、可変長のテキストを省略したい場面でよく使われます。

ellipsisを使うための基本CSS

.ellipsis {
　white-space: nowrap; 　// テキストを折り返さない
　overflow: hidden;　//はみ出した部分を非表示に
　text-overflow: ellipsis;　//はみ出したら…にする
}

注意！ellipsisが効かないときのよくある原因

text-overflow: ellipsisが効かない場合、次の点をチェックしてみてください。

• widthまたはmax-widthが指定されていない（自動サイズだと省略されない）
• displayがinlineのまま（inline-blockやblockに変更する必要あり）
• white-space: nowrapを忘れている

複数行でも「…」にするには？

1行でなく複数行を省略したいときは、line-clampを使います。

.multiline-ellipsis {
　display: -webkit-box;
　-webkit-line-clamp: 3; 　/* 3行まで表示 */
　-webkit-box-orient: vertical;
　overflow: hidden;
}