CSSで文章がはみ出た部分を省略する方法

今回は、「CSSで文章がはみ出た部分を省略する方法」について紹介します。

完成形は以下になります。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

1行の文章と複数行の文章ではみ出した部分が「…」と省略されていることが分かると思います。

それでは早速作っていきましょう。

文章が1行の場合

HTML

CSS

まずは親要素であるlistに対して幅を指定します。

そしてaタグがはみ出た部分を省略していきたいので、aタグをブロック要素にします。

最後に以下の3行を指定します。

これではみ出した文章を省略させることが出来ました!

文章が複数行の場合

HTML

CSS

まとめ

以上が、「CSSで文章がはみ出た部分を省略する方法」でした。

是非参考にしてください。

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事