こんにちは、おーしまです。
今日も今日とて、自動車レビューアプリを作っておりまして、今回は見た目の方で、HTML、CSSをいじっていたのでそちらの方を紹介します。
今日1日かけて、昨日よりはだいぶそれっぽいものになったと思います。
「文字が多すぎてはみ出る時に「・・・」を付けて表示を切る方法」は下の方に書いてあります。
それで早速見ていきましょう。
ホーム画面
新規レビュー投稿画面
投稿内容は気にしないでください笑
こんな感じになりました。まあ、見やすくはなったんですけど、、なんというか、いかにも初心者プログラマーが作りましたオーラがガンガン出ていますね。ヘッダーの太さとか、画像の少なさが原因でしょうか。今後、ネットで、メルカリなどのサイトを見て、寄せていきたいと思います。
それでは、頑張った点について、コードも添えて説明していきます。
コード
こちらの「マクラーレン」がたくさん並んでいるタイトル部分と、「あああああ...」となっているテキスト部分のように、1行に入りきらない時、「・・・」を使って、省略する方法です。この2つは、やっていることは似ていますが、やり方は全然違います。
まずはタイトル部分のやり方です。
cssファイルで、
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
この3つのコードを用います。
- overflow: hidden; で、はみ出た部分を隠します。
- text-overflow: ellipsis; で、はみ出た部分に「・・・」を取り付けています。
- white-space: nowrap; で、改行しないように制限をかけています。
これではみ出した部分が隠れ、「・・・」が付くようになりました。
次に、テキスト部分です。
私も最初は上記のやり方でやろうとしましたが、複数行にわたる場合のやり方はよく分からなかったので、こんな形にしました。
<div class='review-text-sentence'> <% if car.text.length >= 170 %> <%= car.text.slice(0,170) %>... <% else %> <%= car.text %> <% end %> </div>
これは、そもそもhtmlではなくて、レビューのテーブルからテキストを取り出す際に、170文字以上だったら、最初の170文字だけ取り出して、最後に「...」をつけてそれを表示するやり方です。（170文字はいい感じに入る文字数だから）
170字以上だった場合は、sliceメソッドでテキストを切っています。
170字未満はそのまま表示します。
参考になったでしょうか。
これは、我ながら、ナイスアイデアでしたね。
今回はここまでです。
それではまた〜。
