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

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

max-widthとmin-widthの違いについてわかりやすく説明します

どうも、チャーさんです。 あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので …

no image

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

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

no image

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

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

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssでテーブルの行間を広げる方法

どうも、チャーさんです。 あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いて …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

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

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

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

最新記事

チャーさん

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

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

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