文字数が多い場合に「…」を表示する方法
公開日:2021年09月22日
以下のように文字数が多い場合は「…」を表示する方法
通常は「…」なしで文章を表示する。
文字数が多い場合は最後を「…」として、はみ出た文字を隠す。
表示行数が1行の場合
幅300pxを超える場合に「…」を表示する方法です。幅300px部分を適宜変更して利用します。
.text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 300px;
}
表示行数が複数行の場合
幅300pxで改行し3行を超えた場合に「…」を表示します。幅300px部分を適宜変更し、行数は「-webkit-line-clamp: 3;」部分を変更します。
.text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
width: 300px;
}
同じカテゴリーのコンテンツ
