【CSS】テキストの3点リーダー表示(複数行対応)
指定行数を超えたテキストを3点リーダー表示する対応をcssのみで行う方法。
scss
p { font-size: 13px; line-height: 1.6; height: 13 * 1.6 * 2 + px; // font-size * line-height * 表示する行数 overflow: hidden; position: relative; &:before, &:after { background-color: #fff // 表示領域の背景色 position: absolute; } &:before { content: "..."; padding: 0 0 0 9px; top: 13 * 1.6 * (2 - 1) + px; // font-size * line-height * (表示する行数 - 1) right: 0; } &:after { content: ""; height: 100%; width: 100%; } }
コメントを残す