CSS - min-width 屬性

CSS min-width 屬性設定元素的最小寬度。如果內容超過最小寬度，元素將擴充套件以適應內容。如果內容適合指定的最小寬度，則對元素的大小沒有影響。

語法

min-width: length | percentage | initial | inherit;

屬性值

值	描述
長度	使用長度單位（例如 px、em、rem 等）設定元素的最小寬度。預設值為 0。
百分比	使用百分比值（例如 10%）相對於容器的大小設定元素的最小寬度。
初始	將其屬性設定為預設值。
繼承	從父元素繼承該屬性。

CSS Min Width 屬性示例

以下示例說明了使用不同值的 min-width 屬性。

使用長度值的最小寬度屬性

要設定元素寬度的最小限制，我們可以使用長度單位（例如 px、em、rem 等）指定最小寬度值。如果內容大於 min-width，則元素會擴充套件以容納內容。如果內容小於 min-width，則空間可見。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         padding: 5px;
         background-color: lightgreen;
      }

      .display {
         display: inline-block;
      }

      .ex1 {
         min-width: 400px;
      }

      .ex2 {
         min-width: 30em;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-width property
   </h2>
   <h4>
      min-width: 400px (the minimum width is 400px, 
      if content is larger, the height will increase.)
   </h4>
   <span class="container ex1 display">
      TutorialsPoint provides extensive online tutorials
   </span>
   <br/>
   <h4>
      min-width: 30em (the minimum width is 30em, 
      if content is larger, the height will increase.)
   </h4>
   <span class="container ex2 display">
      TutorialsPoint provides extensive online tutorials
   </span>
</body>
</html>

使用百分比值的最小寬度屬性

要設定元素寬度的最小限制，我們可以使用百分比值（例如 10%）相對於包含元素的大小指定最小寬度值。如果內容大於 min-width，則元素會擴充套件以容納內容。如果內容小於 min-width，則空間可見。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .props {
         display: inline-block;
         padding: 15px;
         background-color: lightgreen;
      }

      .ex1 {
         min-width: 70%;
      }

      .ex2 {
         min-width: 90%;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-width property
   </h2>
   <h4>
      min-width: 70% (the minimum width is 70% of 
      the body's width, height increases, if content 
      is larger than the min-width)
   </h4>

   <span class="ex1 props">
      TutorialsPoint provides extensive online tutorials
   </span>
   <br/>
   <h4>
      min-width: 90% (the minimum width is 90% of 
      the body's width, height increases, if content 
      is larger than the min-width)
   </h4>

   <span class="ex2 props">
      TutorialsPoint provides extensive online tutorials
   </span>
</body>
</html>

支援的瀏覽器

屬性
min-width	1.0	7.0	1.0	2.0.2	7.0

css_properties_reference.htm

列印頁面