Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css

cssで文章を省略する方法。コピペでok

投稿日:

Pocket

どうもチャーさんです。

 

あなたはcssで文章を省略したいと、

思っていませんか?

 

この記事では、cssを使い、

文章を省略する方法を書いています。

 

 

なので、あなたがこの記事をよめば、

cssで文章を省略できるようになります。

 

ちなみにcssで文章を省略すると、

文末が・・・という感じでどんな長文も、

省略されて1行になります。

 

というわけで、あなたが、

cssで文章を省略したい場合、

このまま下にスクロールして読んでみてください。

 

スポンサードサーチ

cssで文章を省略する記述

 

で、ということでまず結論からです。

 

cssで文章を省略するには、

以下の記述を文章がある親要素のタグなどに

コピペすればokです。

 

overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;

 

 

記述例

html

<body>

<div class=”wrap”>
この文章はかなりの長文なので、これは普通おりかえされるのだが、折り返さずに1行に省略しようと思う。
</div>
</body>

css

<style>
.wrap {
width:300px;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>

 

みたいな感じです。

 

これをすれば、文章が省略され、

文末が…という感じで省略されます。

 

なぜこれで省略されるかの仕組み説明

 

ということで、なぜこうなるのか、

理解して再現できるように説明しておきます。

 

まずwhite-space:nowrap;

を指定すると、改行されていた長文が、

改行されず全部1行に並ぶようになります。

 

 

しかしこれでは、見栄えが悪いので、

overflow:hidden;をつけることで、

親要素の幅から出た部分を表示させないようにします。

 

そして最後に、text-overflow:ellipsis;

をつけると、文末が…になってくれるわけですね。

 

 

上記が紹介したこの3つの記述を、

書けばcssで文章が省略できるという仕組みになります。

 

またこの文章の省略ですが、

親要素に幅の指定がデザイン上は、

重要だったりします。

 

 

というのもたとえば、上記の3つの記述を

書いても、親要素に幅が無い場合、

画面いっぱいに文章が広がります。

 

そして最後に文末が…になるという形になります。

なのでwebページを制作する際などは、

親要素にwidth等を指定して綺麗にみえるようにするとokです。

 

スポンサードサーチ

まとめ

 

ということで、まとめに入ります。

cssで文章を省略したい場合は、

 

overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;

 

この上記3つを、省略したい文章のある、

親要素のタグに指定しましょう。

 

 

そうすれば、文末が…という形で、

省略されます。

 

さて、ということで、

早速あなた自身で試してみましょう。

 

 

やることは簡単で、

overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;

この3つを記述するだけです。

 

そうすれば、cssで文章を省略できますよ。

 

そして、あなたのweb制作スキルがあがり、

仕事の獲得にもつながるでしょう。

 

 

なので、ぜひまずはやってみてください。

 

あと1つ注意として、

上記3つを指定しても、文章自体が短いと、

省略はされないです。

 

 

なので1行あたりを改行されるくらい、

長くした上で上記3つを記述して、

試してみてください。

 

 

それでは、cssでテキストの省略をする方法でした。

読んでいただきありがとうございました。

 

チャーさん

-css

スポンサードサーチ

関連記事

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。