Help us understand the problem. What is going on with this article?

長すぎる文字列をCSSで...表示にする方法

長すぎる文字列をCSSで...表示にする方法

使用言語

cssのみ!

こんな時に使えます!

アプリ作成を際にとても長い文章を表示しなければならず、ビューが崩れてしまったことはありませんか?
ビューが崩れてしまうくらいなら一部だけ文章を表示するだけにしたい...そんな時に使います

試しに使ってみましょう!
以下のような文章があったとします
スクリーンショット 2019-12-19 23.12.59.png

例では真っ白な画面に文字を表示させているだけですが、凝ったビューを作る際はこのような長い文章が邪魔になってしまうことがあります
しかし、この文章を以下のように表示させることができます!
スクリーンショット 2019-12-19 23.12.41.png

やりかた

とても簡単です!
...の表示に変えたいクラスに対して以下のcssを設定するだけ!(.targetです)
スクリーンショット 2019-12-19 23.08.24.png
この4つの記述を組み合わせることで...表示を実現できます
widthの値を変えることでどこから...表示にするかも変えられます

試しにwidthを70pxにしてみると...
スクリーンショット 2019-12-19 23.19.27.png

仕組み

なぜこの記述で非表示にできるのでしょうか?
1つずつ順番に見ていきましょう


overflow: hidden;
これで、はみ出した文字を非表示にできます
しかし、はみ出したorはみ出してないはどこで判断するのでしょうか?


width:;
横幅を指定します widthで指定した値よりもはみ出てしまうとoverflow: hidden;が適用します


text-overflow: ellipsis;
はみ出てしまった要素の表示方法を指定します ellipsisにするとはみ出た要素を...で表示するようになります!


white-space: nowrap;
改行を半角スペースに置き換えます
一見...表示には関係ないように思えますね
①〜③だけで...表示は実現できるように思うかもしれません なぜwhite-space: nowrap;が必要なのでしょうか?
試しにwhite-space: nowrap;を削除した表示を見てみましょう

スクリーンショット 2019-12-19 23.33.02.png

そうなんです!
widthの幅で勝手に改行されてしまいます
はみ出るよりも改行が優先されてしまうので...表示に出来なくなってしまいます これを防ぐためのwhite-space: nowrap;です!

フィードバックをください!

私はプログラミングの勉強を始めたばかりでアウトプットのために記事を書いています
この記事で分かりにくかったところや今回紹介した方法よりももっと良い方法があれば教えてください!

gomo
プログラミング初心者です ruby html haml css javascriptを勉強しています
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした