1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

#長すぎる文字列を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;です!

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?