JavaScriptトラストバンク開発部・フロントエンドチームの君田(きみた)です。本日はテキストの省略表示に使用することができるcssプロパティ「line-clamp」について書いていきます。最近業務で業務で使用する機会があり、大変便利で感動を覚えたので是非記事にしようと思いました。これまでのテキスト省略方法トラストバンクではこれまでテキスト省略をする場合には、JavaScriptを使用して実現していました。以下の様なコードを使用していると思います。省略対象の文字数が50を超えた場合、50文字以降は省略し、51文字目に「...」を加えて表示するサンプルです。「PCとスマートフォンなどデバイスごとに省略する文字数を変更したい」などの要件が飛んできた場合、JavaScriptで行うとなると少し作業が発生します。1の場合は何文字になるかを調整しながら、文字数をカウントしていかなければなりません。2の場合は上記のサンプルコードにPCかスマートフォンかを判定する処理を追加で記載しなければなりません。そんな作業を省いて、良い感じにテキストを省略してくれるのが今回紹介する「line-clamp」です!JavaScriptで省略表示をしていた背景line-clampはIE11でサポートされておらず、今まであまり日の目を浴びることがなかった様に思えます。このプロパティがちゃんと使用できるようになったのは2022年6月16日にIE11のサポートが終了したためです。文字数を指定せずとも、横幅に合わせて省略することができました!内容を確認していきましょう!まず、表示可能な横幅を指定します。その次に指定しているプロパティ「display」「-webkit-box-orient」ですが、この値は省略表示する場合は固定値だと思っていただいて問題ないと思います。MDNに以下の記載があります。設定されている組み合わせのときのみ使用できます。https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp「-webkit-line-clamp」「overflow」がテキスト省略文字数の正体です。「-webkit-line-clamp」で省略テキストの表示可能行数を指定します。上記の場合3なので3行まで表示します。「overflow」にhiddenを指定することで、指定した表示可能行数を超えた場合のテキストは非表示になります。「overflow」に関しては以下の記載があります。しなければ内容は切り取られませんが、省略記号は指定した行数の後に表示されます。https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clampcssの設定だけでテキスト省略表示ができるなんてすごい。これからも使用する機会が多そうなので、役に立つ場面が多そうです。09:04関連記事2024-06-27社内定例ミーティングのアジェンダ作成とSlack通知をGASで自動化パブリテック事業部プロダクトグループ所属のたけだです。当社...2023-04-27半角英数が改行されない原因と対処方法フロントエンドチームの君田(きみた)です。»プロフィール「自立した持続可能な地域をつくる」というビジョンのもと、様々な事業・サービスを展開しているトラストバンク開発メンバーによるブログです。(1)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。