Style widowsEigenschaft
Style-Objekt
Definition und Verwendung
Die Eigenschaft widows legt die Mindestanzahl sichtbarer Zeilen fest, die ein Element oben auf einer Seite haben muss (zum Drucken oder für die Druckvorschau), oder gibt sie zurück.
Die widows-Eigenschaft wirkt sich nur auf Block-Level-Elemente aus.
Tipp:widows:5 bedeutet, dass mindestens 5 Zeilen unter einem Seitenumbruch sichtbar sein müssen.
Tipp:Die orphans-Eigenschaft legt die Mindestanzahl sichtbarer Zeilen fest, die ein Element am unteren Rand einer Seite haben muss, oder gibt diese zurück.
Syntax
Festlegen der widows-Eigenschaft:
Object.style.widows="number|inherit"
Zurückgeben der widows-Eigenschaft:
Object.style.widows
| Wert | Beschreibung |
|---|---|
| number | Eine Ganzzahl, die die Mindestanzahl sichtbarer Zeilen angibt. Der Standardwert ist 2. |
| inherit | Der Wert der widows-Eigenschaft wird vom übergeordneten Element geerbt. |
Browser-Unterstützung
Nur Opera unterstützt die widows-Eigenschaft.
Beispiele
Beispiele
Ändern der widows-Eigenschaft für das Drucken oder die Druckvorschau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel-Tutorial (example.com)</title>
<script>
function ChangeWidows(){
document.getElementById("p1").style.widows=document.getElementById("widows").value;
}
</script>
<style>
.othercontent{
width:400px;
border-top:19cm solid #c3c3c3;
}
@page{
/* Druckseitengröße festlegen */
size:21cm 27cm;
margin-top:2cm;
}
@media print{
.widows{
widows:2;
}
}
</style>
</head>
<body>
<div class="othercontent">
<input id="widows" value="2"/>
<button onclick="ChangeWidows();">Fenster ändern</button>
<p style="font-size:120%" id="p1">
Fenster ändern und Druckvorschau anzeigen<br>
Zeile 2<br>
Zeile 3<br>
Zeile 4<br>
Zeile 5<br>
Zeile 6<br>
Zeile 7<br>
Zeile 8<br>
</p>
<div class="othercontent"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel-Tutorial (example.com)</title>
<script>
function ChangeWidows(){
document.getElementById("p1").style.widows=document.getElementById("widows").value;
}
</script>
<style>
.othercontent{
width:400px;
border-top:19cm solid #c3c3c3;
}
@page{
/* Druckseitengröße festlegen */
size:21cm 27cm;
margin-top:2cm;
}
@media print{
.widows{
widows:2;
}
}
</style>
</head>
<body>
<div class="othercontent">
<input id="widows" value="2"/>
<button onclick="ChangeWidows();">Fenster ändern</button>
<p style="font-size:120%" id="p1">
Fenster ändern und Druckvorschau anzeigen<br>
Zeile 2<br>
Zeile 3<br>
Zeile 4<br>
Zeile 5<br>
Zeile 6<br>
Zeile 7<br>
Zeile 8<br>
</p>
<div class="othercontent"></div>
</div>
</body>
</html>
Selbst ausprobieren »
Style-Objekt Weitere Erweiterungen