【CSS】何行以上「…」をjs無しで実装

点々
この記事は約1分で読めます。
広告
何文字以上「…」や何行以上「…」ってjsでやろうとすると結構手間だよね。

jsでやろうとすると文字数半角・全角を分けて数えて、n文字以上になったらそれ以上を切り捨てて、「…」を追加して表示する。

でもブラウザやデバイスや横幅によって上手く行数が合わなくなったりする。
これをCSSでスッキリ解決してくれるのが今回ご紹介する方法。
行数をしていしてその行の最後に「…」を追加してくれる便利な書き方。
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 3行表示 */

エンデ・バタローをフォローする
CSS

東京に住み始めて7年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて7年目になります。
エディタはAtomからVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました