ちょっとしたきっかけで、CSSを真面目に再勉強中。
自分でデザインを考えるのが面倒だったので、とあるサイトを目で見て
真似してみようかと・・・
そこには、メール一覧のようなものが表示されるのだが、大雑把に言うとDivタグ２つが float:left で並んでいて、左側のDivタグ内にPタグが存在する。今回はこのPタグに入る文字列が長すぎて、勝手に折り返されてしまう現象を回避する方法をメモっておく。
[css mark=”6,7,8,9,10″]
div.icon p{
font-size: 13px;
color: #333333;
width: 170px;
margin: 0px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis; /* Safari */
-o-text-overflow: ellipsis; /* Opera */
}
[/css]
面倒なので成功した結果を画像として貼り付けておきます。
エンジニアというものは基本デザインに弱い。Bootstrapを使うと、そこそこ簡単に綺麗なデザインを作ることはできますが、やっぱりCSSの基本をマスターしておかなきゃなと思い、CSSをそこそこ真面目に学習中。あちこちのサイトからカットアンドペーストしても良いのですが、基本を理解をするには、１からコツコツとCSSを手書きするほうが堅いので、そんなスタイルで学習しています。 今回はRailsでデフォルトになっている scssを使って、上辺右寄せ＋ドロップダウンありのメニューを作ってみましょう。 scssについては詳しくわかっていないのですが、大雑把にいうと、Railsが実行時にCSSにコンパイルし…
Leave a comment