プログラミングこんにちは!ケインコスゲです。WordPressなどのCMSを使ったりするケースでよくあると思うのですが、Webサイトを制作している時に、文章の末尾に三点リーダー(...)をつけたい時が、たまにあります。cssで複数行の文章末尾・文末に三点リーダーを実装する方法まずはいきなり、cssで複数行の文章末尾・文末に三点リーダーを実装する方法をご紹介したいと思います!今回ご紹介したサンプルはfont-size:16pxline-height:1.52行目の文末で三点リーダーを表示させて、それ以降を省略するという設定条件になっています。後ほど、今回ご紹介した方法を応用させる時の考え方をご紹介しますので、この設定条件を覚えておいてくださいね!また、この記事のタイトルにもありますが、今回ご紹介する対応は「日本語対応」であり、裏を返せば英語などのアルファベットの文章に対して使用すると、うまくいかないケースがあるということに注意してください!使用しているCSSをみていただくとわかると思うのですが、「position」「line-height」「overflow」など、特に珍しいCSSを使用しているわけではありません!各種ブラウザ対応を考えても、非常に無難な実装方法になっていると思います。今回ご紹介した方法、実際に色々な条件下で実装するにはどうしたら良いの?と思われる方もいらっしゃるかもしれません。ここからは、今回の実装方法のベースとなる考え方についてご紹介させていただきます!この考え方をマスターしていただければ、今回ご紹介した実装方法を色々なケースで応用して使うことができると思いますよ!今回ご紹介しているCSSで複数行の文章末尾・文末に三点リーダーを実装する方法の元となる考え方を図にしてみました。以下、文章ではありますが、実装方法について解説していきたいと思います!1、pタグで文章を表示、pタグに対するafter擬似要素を適用して、contentプロパティで三点リーダーを表示させるまずは文章を表示します。HTMLにおいて、普通の文章には大抵pタグを使用すると思うので、pタグを使って文章をHTMLでマークアップします。マークアップしたpタグに対してCSSのafter擬似要素を適用させて、contentプロパティを使って三点リーダーを表示させるようにします。lang="html"><code>吾輩は猫である。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。あとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。その当時は何という考もなかったから別段恐しいとも思わなかった。彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。}2、positionを使って文章の上に三点リーダーを重ねるようにレイアウトそして、文章を表示するpタグにposition:relativeを、文章に対してafter擬似要素を適用し三点リーダーをcontentプロパティを使って表記し、さらにposition:absoluteをあてて、文章の上に三点リーダーを重ねるようにレイアウトします。bottomプロパティとrightプロパティを0にすることで、文章のpタグの表示領域の1番右下に三点リーダーが書かれたafter擬似要素が配置されます。}3、文章(pタグ)の表示行数を決めて、表示行数をこえた文字は隠すようにする次に、文章(pタグ)の表示行数を決めます。今回は文章を2行表示させて、それ以上は隠すという設定でお話を進めていきたいと思います。行間」で構成されています。×行間1.5×行数2」となります。ここでemという単位が出てきました。emを使うと、そのタグに適用されている文字サイズを1emとして、様々なサイズを表現することができます。ご存知ない場合は、ぜひ知っておいてくださいね!そして、3行目以降の文章を隠すために、overflow:hiddenを適用します。}4、三点リーダーを表示しているafter擬似要素に対して幅と高さを設定し、背景色を適用する次に三点リーダーを表示しているafter擬似要素に対してCSSを追記していきます。今のままだと文章の2行目の1番最後の文字の上に三点リーダーが被って重なっている状態になり、三点リーダーが見えにくい状態になっています。そのため、after擬似要素に対して、幅と高さを設定し、背景色を適用することで、文章の2行目の1番最後の文字が隠れる状態を作ります。#fff;//背景の色に応じて色を変更してください}5、仕上げ。色々な文章や文字の種類(漢字・ひらがな・カタカナ)が含まれていても問題ないようにする最後に仕上げです。文章に対してtext-align:justify(IE対策でtext-justify:inter-ideographも)を適用し、1行の末文字が必ず右端にくっつくようにします。2015、17日目の記事です。先日、WordPressで会員サイトを作成するという機会がありました。使用したのはWp-membersというプラグインです。WP-me...記事を読むVue.jsでドロップダウンメニューを作る【Vue.jsで作るUIシリーズ】こんにちは!ケインコスゲ(@keinkosuge)です。...記事を読むWordPressでWebサイト制作時に必要なもの&レンタルサーバ会社の選び方のポイントサクッとWebサイトを制作したい時の1つの選択肢として、WordPressを使用するという選択肢があります。Mapsの埋め込みをWebサイトに設置したいとき、ありますよね。...記事を読むJavaScriptでカレンダーの一部・矢印クリックで年月を変更操作できるプログラムを作るこんにちは!ケインコスゲです。今回は、JavaScriptを使って、カレンダーの一部にあたる部分を作りたいと思います。具体的...記事を読む【HTML5】sectionとarticleの使い方・違いについて、Webサイトの使用実例から考えてみるこんにちは!ケインコスゲ(@keinkosuge)です。今日はHTMLのお話です。お題は「sectionとarticleの違い・使い...記事を読むjQueryプラグイン「bxslider」がjQuery3系で動かない時の対処法jQueryのbxsliderというスライドショープラグイン、とっても使い勝手がいいですよね。僕もよくお世話になっています。こ...記事を読むjQueryプラグインbxsliderで画像が自動ループし続けるスライドショーを実装jQueryのスライドショープラグイン「bxslider」について以前にも一度ブログを書いたことがあります。バス&終電の情報まとめ。