max-width

max-width | min-width | width

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

max-width

設定元素矩格的最大寬度，不可為負值；只能用在區塊元素。可設為：

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

元素矩格的寬度不可超過 max-width，如果 width 小於 max-width，會以 width 作為矩格的寬度。元素只有設 max-width 時，會以其值為矩格的寬度。 <p style='max-width:30%; width:80%; background:#733'> max-width:30%; width:80%<br /> 好玩遊戲，射擊遊戲，益智遊戲，戰爭遊戲，賽車遊戲，線上遊戲，越野遊戲。 </p> <p style='max-width:80%; width:30%; background:#733'> max-width:80%; width:30%<br /> 好玩遊戲，射擊遊戲，益智遊戲，戰爭遊戲，賽車遊戲，線上遊戲，越野遊戲。 </p> <p style='max-width:30%; background:#733'> max-width:30% </p>

• 風格用法：

  <p style='max-width:30%; width:80%; background:#733'>
  max-width:30%; width:80%<br />
  好玩遊戲，射擊遊戲，益智遊戲，戰爭遊戲，賽車遊戲，線上遊戲，越野遊戲。
  </p>
  
  <p style='max-width:80%; width:30%; background:#733'>
  max-width:80%; width:30%<br />
  好玩遊戲，射擊遊戲，益智遊戲，戰爭遊戲，賽車遊戲，線上遊戲，越野遊戲。
  </p>
  
  <p style='max-width:30%; background:#733'>
  max-width:30%
  </p>
  
  

• 執行結果：

  max-width:30%; width:80%
  好玩遊戲，射擊遊戲，益智遊戲，戰爭遊戲，賽車遊戲，線上遊戲，越野遊戲。

  max-width:80%; width:30%
  好玩遊戲，射擊遊戲，益智遊戲，戰爭遊戲，賽車遊戲，線上遊戲，越野遊戲。

  max-width:30%

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

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

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

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

• 風格用法：

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

• 執行結果：

  好玩遊戲

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

• 上例中，必須加上 overflow:auto，否則 IE6 會延伸寬度。這與真正的 max-width 有差異。