目次
テキストの末尾を3点リーダーにするには、CSSの「text-overflow」を使用します。
「text-overflow」の値には、「clip」と「eclips」があります。
・text-overflow:clip;
→デフォルト値。省略符号は表示されない
・text-overflow:eclips;
→テキストが表示領域を越えた場合、「…」が表示される
p {
width:100%;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
p {
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 2行目まで表示
overflow: hidden;
}
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
いかがでしたでしょうか？
ブログの一覧ページなどに使えるテキストの末尾を3点リーダーにする方法でした。
猫田 ねこ
パチンコ店勤務からweb制作会社へ転職という異色の経歴。漫画大好き。アニメ大好き。パチンコ大好きな、ねこです。
.htaccessの書き方、.htaccessでできること
【CSS】背景に入れたグラデーションが動く
【jQuery】郵便番号から住所を自動入力してくれるajaxzip3の使い方
