CSSのTips

右にはみ出した文字を点々(三点リーダ)で省略するには 2014/02/21

CSSに以下のように書く。

text-overflow: ellipsis;

https://developer.mozilla.org/ja/docs/CSS/text-overflow
http://d.hatena.ne.jp/end0tknr/20120324/1332589506

ボックスの最低の高さを指定して、IE6でも対応させるには 2013/04/10

CSSの min-height はIE6に対応していないので、以下の例のように2行を付け足す。 height を2つ指定するのは、IE6のバグを利用したものらしい。 IE7以降は min-height だけでも大丈夫。

例

.hoge {
  min-height: 120px;
  height: auto !important; /* for IE6 */
  height: 120px; /* for IE6 */
}

textarea に width: 100%; を指定すると横にはみ出してしまう場合 2013/04/10

margin や padding が指定してあると、その分はみ出してしまう。指定してなくてもデフォルトの border でやっぱり少し幅がはみ出してしまうので、 box-sizing を使用する。

例

.hoge textarea {
  width: 100%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

How can I make a TextArea 100% width without overflowing when padding is present in CSS?
http://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present

‘box-sizing’ プロパティ | CSS Basic User Interface Module Level 3 (CSS3 UI) 日本語訳
http://momdo.s35.xrea.com/web-html-test/spec/WD-css3-ui-20120117.html#box-sizing0