トップページなどに トピック一覧や、サムネイル付きの記事を表示する際には
記事毎のタイトルの長さや、サマリーテキストの文字数が大きく違う場合があります。
そんな時には、親要素の幅を超える場合には 「…」をつけて省略してくれる
が、FireFoxとIEは対応していない
|
1 2 3 4 |
overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; |
すべてのブラウザに対応させる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// Variables $font-size-base: 16px; $line-height-computed: 1.6; $lines-to-show: 4; .str_limit_some { display: block; overflow: hidden; width: 100%; font-size: $font-size-base; height: $font-size-base * $line-height-computed * $lines-to-show; line-height: $line-height-computed; position: relative; &:before, &:after { position: absolute; } &:before { content: "..."; top: $font-size-base * $line-height-computed * ($lines-to-show - 1); right: 3px; } &:after { content: ""; height: 100%; width: 100%; } } |
PHPで文字数制限
|
1 2 3 4 5 6 |
<?php $len = 36; print(mb_strimwidth("商用利用もできる日本語フォントを集めたWebサイトのご紹介", 0, $len, "...", "UTF-8") . "<br />"); print(mb_strimwidth("adobe、2020年末までにflash-playerの配布を終了", 0, $len, "...", "UTF-8") . "<br />"); print(mb_strimwidth("WordPressカテゴリーの情報を取得", 0, $len, "...", "UTF-8") . "<br />"); ?> |
