Własność CSS overflow-clip-margin

Własność CSS overflow-clip-margin określa, jak daleko treść nadmiarowa elementu przycięta przez własność overflow: clip; może wychodzić poza zawierający ją element. Granica wyznaczana przez tę własność to tzw. krawędź odcięcia nadmiaru (ang. overflow clip edge).

Wartości i składnia

Własność CSS overflow-clip-margin przyjmuje jedną lub dwie wartości, którymi mogą być liczba z jednostką długości oraz jedno z następujących słów kluczowych: content-box, padding-box, border-box.

Jeśli podane jest jedno ze słów kluczowych to oznacza ono miejsce, od którego zaczyna się obliczanie odległości krawędzi odcięcia nadmiaru:

• content-box – krawędź obszaru treści
• padding-box – krawędź obszaru dopełnienia (wartość domyślna)
• border-box – krawędź obszaru obramowania

Jeśli dodatkowo zdefiniowana jest liczba z jednostką długości, to obcięcie treści następuje w określonej odległości od miejsca początkowego. Jeśli zdefiniowana jest tylko liczba, to dodatkowo domyślnie przyjmowana jest wartość padding-box.

Przykład

<style>
div {
  width: 300px;
  height: 100px;
  overflow: clip;
  overflow-clip-margin: 30px;
}
</style>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing 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>

Efekt:

Zastosowanie

Własność CSS overflow-clip-margin ma zastosowanie do elementów, których własność overflow jest ustawiona na clip.

Podsumowanie