Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。2017/09/28こんにちは(・∀・)今回は長くなった文章を「...」に置き換えて省略する方法についてご紹介します。CSS3で長い文章を省略して「...」に置き換えるtext-overflowプロパティの値ellipsisは指定した要素の横幅を文章が超えた場合「...」に置き換えます。値clipは何もしません。sed.text-overflowプロパティで長い文章を省略して「...」に置き換える方法はwhite-space:nowrapを併用しているため複数行の文章には対応しておりません。webkit系だけでよければ次の方法で複数行の文章にも対応できます。eleifend.この方法はdisplay:flexではなくboxで実現しています。ご紹介しておいて何ですが、display:boxはいづれサポートされなくなるのでこの方法を使用するのはやめた方がいいかもしれません。いかがでしたでしょうか、今回はCSS3で長い文章を「...」に置き換えて省略する方法についてご紹介しました。複数行で長い文章を省略したい場合はJavaScriptで対応した方が良さそうです。一応リンクを張っておきます。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。