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で画像をトリミングする方法。「記述1行で完了」

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

no image

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

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

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

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

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

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

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

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

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

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

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

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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