参考サイト実装したいものこのような新着情報やWordPressのリンクカードなどで見かける、要素からはみ出る文末に三点リーダー「...」で表示させるCSSを実装しようと思ったら途中で詰まってしまったので備忘録も兼ねて共有いたします。三点リーダーCSS実装方法3パターン紹介するのはCSS(Sass)のみで実装できるものです。それぞれCodePenとコードをご紹介します。CodePenの方は要素の範囲がわかりやすいように背景色をつけています。コピペする方はCodePenの下に載せるコードをご利用ください。実用的なのは1と2だねパターン11行ごとにつける方法こちらは要素内で改行させずに文末に三点リーダーをつける方法です。white-space:nowrap;}パターン2複数行の文末のみにつける方法(Sass)こちらは複数行で改行をしながら、文末のみ三点リーダーにする方法です。pをたくさんいれるとその分、要素は下に広がってしまうので、途中で改行させたい時は<br>を使えばOKだと思います。こちらは途中で演算があるので、CSSだと難しいです。#ffffff);}パターン3複数行で行数を指定してつける方法(Chrome,Safariのみ)こちらは同じく複数行の文末を三点リーダーにする方法です。して楽なのですが、-webkit-から分かるように、IEやFirefoxが非対応なのであまり実用的ではありません。3;/*三点リーダーにしたい行数*/}以上になります。この実装を使うときは「続きを読む」などのリンクとセットにすると、ユーザーにとって優しいかと思います。新着情報だけでなく、表などtableレイアウトでも使えそうですね。分からないプロパティがあると思いますが、理論や細かい事を知りたい方は、下記の参考サイトやMDNなどでお調べください。調べていたらjQueryで制御する方法もありました。仕組みは、高さを取得して最後の文字を消して「...」を追加するという、CSSとわりと似た方法だと思われます。書かれた年月がわりと新しいので実用性は高いかと。気になる人はこの方法でも実装してみてください。あとはTwitterで質問したときに、PHPで文字数のカウントなんかで制御する方法を提案してくださった方もいらっしゃいました。PHPが得意な方はぜひお試しください。参考サイト参考にさせていただいたサイトです。ありがとうございました。現在、新しい会社での就業に向けて、コーディングのスキルを高めています。CSSCSSだけで実装できる!日向坂46風ホバーエフェクトボタンcssをコピペするだけで使えるホバーエフェクトボタンです。日向坂46っぽいグラデーションカラーで実装してみました。スマホでもエフェクトを見ることができます。コメントをキャンセルメールアドレスが公開されることはありません。上に表示された文字を入力してください。小学校・中学校の先生Web未経験でWebデザイナー/コーダーに転職Webデザインやプログラミングなど様々な情報を発信しています。YouTubeにドラム関連の動画を投稿しております。小学校・中学校の先生Web未経験でWebデザイナー/コーダーに転職Webデザインやプログラミングなど様々な情報を発信しています。YouTubeにドラム関連の動画を投稿しております。意外と簡単!Sassを使ってページ制作2019.07.182019.08.05CSSだけで実装できる!日向坂46風ホバーエフェクトボタン2019.09.30タイトルとURLをコピーしました。