CSSのみで長文を「…」省略する方法
CSSのみで長文を「…」省略する方法をメモ。JavaScriptですることもできますが、こちらの方が簡単ですね。
一行の場合
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;複数行の場合
最後の文字が見切れる場合があるので、複数行の場合はJavaScriptの方がいいかも。
.text-ellipsis{
background: #fff20d;
font-size: 16px;
line-height: 1.5;
height: calc(16px * 1.5 * 2);//文字サイズ×行の高さ×行数
overflow: hidden;
position: relative;
width: 100%;
max-width: 600px;
}
.text-ellipsis::after{
bottom: 0;
content: "...";
height: calc(16px * 1.5);//文字サイズ×行の高さ
position: absolute;
right: 0;
background-color: #fff20d;
}
