min-width

max-width | min-width | width

設定元素矩形格子的寬。另外可以用 height 設定矩格的高。

min-width

設定區塊元素矩格的最小寬度，不可為負值。可設為：

1. 長度：用長度設定元素的寬度。
2. 百分比：相對於包納區塊寬度的百分比。如果包納區塊的寬度沒有宣告，而是由內容決定其寬度，則此參數與 auto 相同。
3. inherit：繼承父元素特徵。

width 小於 min-width 時，以 min-width 為矩格的寬度。width 大於 min-width 時，以 width 為矩格的寬度。 <p style='min-width:300px; background:#733'> min-width:300px<br /> John F. Kennedy said:ask not what your country can do for you - ask what you can do for your country. </p> <p style='min-width:300px; width: 200px; background:#733'> min-width:300px; width: 200px<br /> John F. Kennedy said:ask not what your country can do for you - ask what you can do for your country. </p> <p style='min-width:200px; width: 300px; background:#733'> min-width:200px; width: 300px<br /> John F. Kennedy said:ask not what your country can do for you - ask what you can do for your country. </p>

• 風格用法：

  <p style='min-width:300px; background:#733'>
  min-width:300px<br />
  John F. Kennedy said:ask not what your country can do for you -
  ask what you can do for your country.
  </p>
  
  <p style='min-width:300px; width: 200px; background:#733'>
  min-width:300px; width: 200px<br />
  John F. Kennedy said:ask not what your country can do for you -
  ask what you can do for your country.
  </p>
  
  <p style='min-width:200px; width: 300px; background:#733'>
  min-width:200px; width: 300px<br />
  John F. Kennedy said:ask not what your country can do for you -
  ask what you can do for your country.
  </p>
  

• 執行結果：

  min-width:300px
  John F. Kennedy said:ask not what your country can do for you - ask what you can do for your country.

  min-width:300px; width: 200px
  John F. Kennedy said:ask not what your country can do for you - ask what you can do for your country.

  min-width:200px; width: 300px
  John F. Kennedy said:ask not what your country can do for you - ask what you can do for your country.

• IE6 無此項；Firefox, Safari, Chrome 有支援。

CSS hack min-width。IE6 沒有 min-width，可以利用 expression() 與 clientWidth 達成 min-width 的功能。expression() 限用於 IE6, IE7。下例中

1. IE6 不認得 min-width：該行會被 IE6 忽略；IE7, IE8, Firefox, Safari, Chrome 可正確解讀。
2. IE8, Firefox, Safari, Chrome 不認得 expression()，該行會被忽略。

<style type='text/css'> .hackm {min-width: 160px; width:20px; width:expression( this.clientWidth < 160 ? 160 : this.clientWidth ); background:#339; } </style> <p class='hackm'> 好玩遊戲 </p> <p class='hackm'> 好玩遊戲, 射擊遊戲, 益智遊戲, 賽車遊戲, 武打遊戲, 越野遊戲, 猜謎遊戲, 戰爭遊戲 </p>

• 風格用法：

  <style type='text/css'>
  .hackm {min-width: 160px;
          width:20px;
          width:expression( this.clientWidth < 160 ? 160 : this.clientWidth );
          background:#339;
         }
  </style>
  <p class='hackm'>
  好玩遊戲
  </p>
  <p class='hackm'>
  好玩遊戲, 射擊遊戲, 益智遊戲, 賽車遊戲, 武打遊戲, 越野遊戲, 猜謎遊戲, 戰爭遊戲
  </p>
  

• 執行結果：

  好玩遊戲

  好玩遊戲, 射擊遊戲, 益智遊戲, 賽車遊戲, 武打遊戲, 越野遊戲, 猜謎遊戲, 戰爭遊戲

• expression() 與真正的 min-width 有差異，使用時最好多測試。