どうもチャーさんです。
あなたはcssで文章を省略したいと、
思っていませんか？
この記事では、cssを使い、
文章を省略する方法を書いています。
なので、あなたがこの記事をよめば、
cssで文章を省略できるようになります。
ちなみにcssで文章を省略すると、
文末が・・・という感じでどんな長文も、
省略されて1行になります。
というわけで、あなたが、
cssで文章を省略したい場合、
このまま下にスクロールして読んでみてください。
スポンサードサーチ
ｃｓｓで文章を省略する記述
で、ということでまず結論からです。
cssで文章を省略するには、
以下の記述を文章がある親要素のタグなどに
コピペすればokです。
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
記述例
ｈｔｍｌ
<body>
<div class=”wrap”>
この文章はかなりの長文なので、これは普通おりかえされるのだが、折り返さずに1行に省略しようと思う。
</div>
</body>
ｃｓｓ
<style>
.wrap {
width:300px；
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
みたいな感じです。
これをすれば、文章が省略され、
文末が…という感じで省略されます。
なぜこれで省略されるかの仕組み説明
ということで、なぜこうなるのか、
理解して再現できるように説明しておきます。
まずwhite-space:nowrap;
を指定すると、改行されていた長文が、
改行されず全部1行に並ぶようになります。
しかしこれでは、見栄えが悪いので、
overflow:hidden;をつけることで、
親要素の幅から出た部分を表示させないようにします。
そして最後に、text-overflow:ellipsis;
をつけると、文末が…になってくれるわけですね。
上記が紹介したこの３つの記述を、
書けばcssで文章が省略できるという仕組みになります。
またこの文章の省略ですが、
親要素に幅の指定がデザイン上は、
重要だったりします。
というのもたとえば、上記の３つの記述を
書いても、親要素に幅が無い場合、
画面いっぱいに文章が広がります。
そして最後に文末が…になるという形になります。
なのでwebページを制作する際などは、
親要素にwidth等を指定して綺麗にみえるようにするとokです。
スポンサードサーチ
まとめ
ということで、まとめに入ります。
cssで文章を省略したい場合は、
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
この上記３つを、省略したい文章のある、
親要素のタグに指定しましょう。
そうすれば、文末が…という形で、
省略されます。
さて、ということで、
早速あなた自身で試してみましょう。
やることは簡単で、
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
この３つを記述するだけです。
そうすれば、cssで文章を省略できますよ。
そして、あなたのweb制作スキルがあがり、
仕事の獲得にもつながるでしょう。
なので、ぜひまずはやってみてください。
あと１つ注意として、
上記３つを指定しても、文章自体が短いと、
省略はされないです。
なので1行あたりを改行されるくらい、
長くした上で上記３つを記述して、
試してみてください。
それでは、cssでテキストの省略をする方法でした。
読んでいただきありがとうございました。
チャーさん
