ECサイトを作成していると、長すぎる商品名などが影響してしまい2行-3行と改行してレイアウトがガタガタになってしまうことがあります。そんなときに続きの箇所を「…」と表示して一列にまとめる方法を紹介します。
対処方法
CSSで実装していきます。例えば、例として下記のような商品。
HTML
<divclass="compact">2019年度〇〇賞受賞。福岡県産！〇〇米10kg</div>CSS
.compact{width:300px;/* 要素の横幅を指定 */white-space:nowrap;/* 横幅のMAXに達しても改行しない */overflow:hidden;/* ハミ出した部分を隠す */text-overflow:ellipsis;/* 「…」と省略 */-webkit-text-overflow:ellipsis;/* Safari */-o-text-overflow:ellipsis;/* Opera */}