Blog

CSSのみで文末をカットし、…を代入する方法

2015.03.04Cat:css3 jQuery デザイナー

以前、あるコーディングの案件を受けている時に、ニュースの文で文末を…にしてほしいと言われ、それはコーディングですることじゃなくてシステムでやるのではないかと思ったのですが、いざ調べてみると、CSSで出来る方法がありました。

早速説明していきます。
DEMOもありますのでご覧ください。

DEMO

CSSのみで文末をカットし、…を代入する方法

html

css

すべて必須になります。
text-overflowのellipsisという値で…を代入するようです。
横幅の設定はその要素でも、親の要素でも大丈夫です。

そしてこれは横幅で指定し、それ以上のテキストを消すというものなので、
複数行に対応しておらず、一行の場合のみとなります。

複数行、もしくは文字数を設定したい場合、jQueryを使用すれば可能です。

jQueryでやる方法

htmlは同じで、
jQueryのソースは以下になります。

もっと良い方法があるかもしれません。

text-overflowについては下記URLで説明されておりますので、
よろしければご覧ください。

text-overflow – CSS | MDN

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ