Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
レイアウト Limited support

fit-content()

コンテンツの内在的なサイズに基づいてサイズを決定する関数です。最小コンテンツ幅より小さくならず、指定した最大値を超えないようにサイズを制約します。テキスト量に応じて柔軟にサイズが変化しつつ、最大幅を制限したい場面に最適です。

コンテンツフィットサイズ関数

概要

コンテンツの内在的なサイズに基づいてサイズを決定する関数です。最小コンテンツ幅より小さくならず、指定した最大値を超えないようにサイズを制約します。テキスト量に応じて柔軟にサイズが変化しつつ、最大幅を制限したい場面に最適です。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 未対応

基本構文

CSS 
.tag {
  width: fit-content(200px);
  padding: 0.25em 0.5em;
  background: #e5e7eb;
  border-radius: 4px;
}

実務での使いどころ

  • 可変幅タグの最大幅制限

    タグやバッジのコンテンツに応じて幅を自動調整しつつ、最大幅を制限して長いテキストの溢れを防ぎます。

注意点

  • グリッドレイアウト以外でのfit-content()関数はブラウザサポートが限定的です。fit-contentキーワードとmax-widthの併用を検討してください。

アクセシビリティ

  • コンテンツがクランプされた場合にテキストが切り詰められないことを確認し、全コンテンツがアクセス可能であることを保証してください。

参考リンク