裁剪區域和溢出

  • 發行項

您可以使用 clip 屬性，設定定位元素的裁剪區域。裁剪區域會定義元素會在其中顯現的矩形。超出裁剪區域的任何元素部分都會受到裁剪 (也就是不顯示)。超出裁剪區域的任何元素部分都會裁剪掉 (也就是不顯示)。

定義裁剪區域　

下列 HTML 程式碼使用 clip 屬性來定義絕對定位 DIV 元素的裁剪區域。這個 30x30 像素的方形區域只顯示一部分的文字，其他部分則因為裁剪掉而未顯示，如下列範例所示：

<html>
<head><title>Clip the div</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px; height: 100px;
    width: 100px; clip: rect(0 30 30 0); background-color: green;">
some content some content some content some content some content
some content some content some content some content some content
some content some content some content some content some content
some content some content 
</div>
</body>
</html>

定義裁剪區域時務必小心；參數順序 (上、右、下、左) 相當重要。例如，將 clip:rect 設定為 (0 0 30 30) 會使得區域無法顯示，因為 top 和 right 屬性都是設定為 0。對於根據定位物件左上角的 30x30 裁剪區域，正確的定義是將 clip:rect 設定為 (0 30 30 0)。

您可以使用 clip 屬性動態變更裁剪區域，如下列範例所示：

document.all.Mydiv.style.clip = "rect(0 50 75 0)";

溢位

如果定位元素的內容超過針對該元素定義的區域所能容納的上限，便會造成溢出。預設會顯示任何過多的內容，但是會超出定義區域的末端，因此可能會與文件中的其他元素重疊。您可以使用 overflow 屬性隱藏溢出，或啟用捲軸讓使用者能夠捲動檢視，以避免溢出。

下列程式碼範例使用 overflow 屬性來啟用捲軸。一開始只會顯示 100x100 區域內的文字部分，但使用者可使用捲軸檢視其他部分：

<html>
<head><title>Scroll the Overflow</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px; height: 100px; width: 100px; overflow: scroll;">
some content some content some content some content some content
some content some content some content some content some content
some content some content some content some content some content
some content some content 
</div>
</body>
</html>

您可以將 overflow 屬性設定為 hidden ，以隱藏任何溢出。同樣地，您可以將 overflow 屬性設定為 visible ，使溢出超出區域的末端。

您可以使用 overflow 屬性動態變更溢出，如下列範例所示：

if (document.all.Mydiv.style.overflow != "scroll")
    document.all.Mydiv.style.overflow = "scroll";