[CSS]max-widthで要素の最大幅を設定するサンプル

2014年6月8日2021年8月20日

構文
max-width: 1.5em;
max-width: 65%;
/* キーワード値 */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width は CSS のプロパティで、要素の最大幅を設定します.

使用例1
CSSコード

.maxA{
  max-width: 150px;
}

htmlコード

<td><p class="maxA">文字列xxxx</></td>

使用例2
CSSコード

#AA {
  background: lightblue;
  width: 210px;
}

#BB {
  background: gold;
  width: 100%;
  max-width: 150px;
}

htmlコード

<div id="AA">
  <div id="BB">
    11111111111111111
  </div>
</div>