CSS: overflow-clip-margin プロパティを試す

1. このページの目的

CSS の overflow-clip-margin を試します。

メモ

• clip：固定されたサイズの要素からコンテンツがはみ出てしまう場合に、はみ出る部分が切り取られること。

2. デモ

2-1. コード

HTML

<div id="demo1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

CSS

#demo1 {
  border: 2px solid red;
  width: 250px;
  height: 100px;
  overflow: clip;
  overflow-clip-margin: 20px;
  /*overflow-clip-margin: padding-box;*/
  /*overflow-clip-margin: content-box;*/
  /*overflow-clip-margin: border-box;*/
}

• overflow が clip になっていること。
• overflow-clip-margin には、padding-bot, content-body, border-box なども指定できるが(Chrome 104から)、違いがよく分からない。

2-2. 結果

• Chrome DevTools を使い、overflow-clip-margin の値を変えてみると分かりやすい。

3. 参考

• overflow-clip-margin - CSS: Cascading Style Sheets | MDN
• CSS Overflow Module Level 3
• CSS property: overflow-clip-margin | Can I use...