CSS - overflow-clip-margin 屬性

CSS overflow-clip-margin 屬性指定內容在被裁剪之前可以超出元素邊框的距離。此距離稱為溢位剪裁邊距。

可能的值

<length> − 畫素或 em（相對於元素的字型大小）長度。偏移量指定溢位剪裁邊緣從所選邊框邊緣擴充套件的距離。預設值為零。負值無效。
<visual-box> − 當指定的偏移量為零時，視覺框指定用作溢位剪裁邊緣原點的邊框邊緣。如果省略，則元素的填充框用作預設值。（值可以是 - content-box | padding-box | border-box）

應用於

所有 HTML 元素。

語法

overflow-clip-margin: length in px | length in em | content-box | padding-box | border-box;

CSS overflow-clip-margin - <length> 值

我們可以將overflow-clip-margin 屬性設定為長度值，例如px 或em。此長度值指定內容在被裁剪之前可以在元素邊框外繪製多遠。

<html>
<head>
<style>
   .container {
      display: flex;
   }
   .overflow-px {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 250px;
      height: 150px;
      overflow: clip;
      overflow-clip-margin: 30px;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   .overflow-em {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 250px;
      height: 150px;
      overflow: clip;
      overflow-clip-margin: 2em;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-px">
         <h4>Tutorialspoint CSS Overflow-clip-margin</h4>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
         standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
         make a type specimen book.</p>
      </div>
      <div class="overflow-em">
         <h4>Tutorialspoint CSS Overflow-clip-margin</h4>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
         make a type specimen book.</p>
      </div>
   </div>
</body>
</html>

CSS overflow-clip-margin - <visual-box> 值

下面的示例將元素的overflow-clip-margin 屬性設定為距內容框 30 畫素。內容框是元素內容內部的區域，不包括任何填充或邊框：

<html>
<head>
<style>
   .overflow {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 250px;
      height: 150px;
      overflow: clip;
      overflow-clip-margin: content-box 30px;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
</style>
</head>
<body>
   <div class="overflow">
      <h4>Tutorialspoint CSS Overflow-clip-margin</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.</p>
   </div>
</body>
</html>

列印頁面