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ページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

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

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

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

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

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

no image

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

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

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

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

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

no image

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

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

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

最新記事

チャーさん

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

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

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