Autor publikacji
Virtual Patriot - Administrator

orphans

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości orphans

Za pomocą właściwości orphans możemy określić minimalną liczbę wierszy, jakie powinny pozostać na poprzedniej stronie wewnątrz obszaru interesującego nas elementu HTML w sytuacji gdy przełamanie strony podczas drukowania wystąpi wewnątrz obszaru tego elementu HTML.

Informacje dodatkowe

właściwość orphans ma pierwszeństwo przed właściwością widows

Informacje techniczne o właściwości orphans

przeznaczenie

element HTML tworzący blok treści

pozycja

dowolna

dziedziczenie

tak

wartość initial

2

wyjątki initial

brak

animowanie

nie

Interpretacja właściwości orphans

Firefox

nie

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 8

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości orphans

liczba całkowita

Wyjaśnienie

Za pomocą właściwości orphans oraz dowolnej dodatniej liczby całkowitej możemy określić minimalną liczbę wierszy, jakie powinny pozostać na poprzedniej stronie wewnątrz obszaru interesującego nas elementu HTML w sytuacji gdy przełamanie strony podczas drukowania wystąpi wewnątrz obszaru tego elementu HTML.

Przykład

  orphans:15;

Zobacz rezultat: przykład właściwości orphans

Minimalną liczbą wierszy, jakie powinny pozostać na poprzedniej stronie wewnątrz obszaru przykładowego elementu "div" w sytuacji gdy przełamanie strony podczas drukowania wystąpi wewnątrz obszaru przykładowego elementu "div" jest liczba 15, ponieważ do wspomnianego elementu "div" została dodana właściwość "orphans" wraz z wartością "15".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        orphans:15;
        widows:30;
        width:50%;
        margin:50% auto 0;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>