最新のWeb開発のチュートリアル
 

Style orphans Property

<スタイルオブジェクト

孤児を変更し、印刷または印刷プレビューを確認してください。

"color:brown">"color:mediumblue"><html"color:mediumblue">>
"color:brown">"color:mediumblue"><head"color:mediumblue">>
"color:brown">"color:mediumblue"><script"color:mediumblue">>"color:black">
"color:mediumblue">function ChangeOrphans()"color:red"> {
"color:red">     document.getElementById("color:brown">"p1").style.orphans = document.getElementById("color:brown">"orphans").value;
"color:red"> }
"color:brown">"color:mediumblue"></script"color:mediumblue">>
"color:brown">"color:mediumblue"><style"color:mediumblue">>"color:brown">
.othercontent "color:black">{"color:red">
    width"color:mediumblue">"color:black">: 400px"color:black">;
    border-top"color:mediumblue">"color:black">: 19cm solid #c3c3c3"color:black">;
"color:black">}

@page "color:black">{"color:red">
    "color:green">/* set size of printed page */
    size"color:mediumblue">"color:black">:21cm 27cm"color:black">;
    margin-top"color:mediumblue">"color:black">:2cm"color:black">;
"color:black">}

@media print "color:black">{"color:brown">
    .orphans "color:black">"color:black">{"color:red">
        orphans"color:mediumblue">"color:black">:2"color:black">;
    "color:black">"color:black">}
"color:black">}
"color:brown">"color:mediumblue"></style"color:mediumblue">>
"color:brown">"color:mediumblue"></head"color:mediumblue">>

"color:brown">"color:mediumblue"><body"color:mediumblue">>
"color:brown">"color:mediumblue"><div"color:red"> class"color:mediumblue">="othercontent""color:mediumblue">>
"color:brown">"color:mediumblue"><input"color:red"> id"color:mediumblue">="orphans" value"color:mediumblue">="2""color:mediumblue">>
"color:brown">"color:mediumblue"><button"color:red"> onclick"color:mediumblue">="ChangeOrphans();""color:mediumblue">>Change orphans"color:brown">"color:mediumblue"></button"color:mediumblue">>

"color:brown">"color:mediumblue"><p"color:red"> style"color:mediumblue">="font-size:120%" id"color:mediumblue">="p1""color:mediumblue">>
Change orphans and see the print preview."color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 2"color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 3"color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 4"color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 5"color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 6"color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 7"color:brown">"color:mediumblue"><br"color:mediumblue">>
Line 8"color:brown">"color:mediumblue"><br"color:mediumblue">>
"color:brown">"color:mediumblue"></p"color:mediumblue">>

"color:brown">"color:mediumblue"></body"color:mediumblue">>
"color:brown">"color:mediumblue"></html"color:mediumblue">>
»それを自分で試してみてください

定義と使用法

孤児プロパティセットまたはページの最下部に表示されなければならない要素の行の最小数を返す(for printing or print preview)

孤児プロパティはブロックレベル要素に影響を与えます。

Tip:孤児:5は、少なくとも5行は改ページ上で表示されなければならないことを意味します。

Tip:設定するか、ページの最上部に表示されている必要があり要素の行数の最小値を返すために未亡人プロパティを参照してください。


ブラウザのサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

孤児プロパティは、Internet Explorer、オペラとChromeでサポートされています。

注意:孤児プロパティは、FirefoxやSafariでサポートされていません。 プロパティは、IE7および以前のバージョンでサポートされていません。 IE8は、!のDOCTYPEが必要です。 IE9以降は完全にサポートしています。


構文

孤児プロパティを返します:

object .style.orphans

孤児プロパティを設定します。

object .style.orphans=" プロパティ値
説明
number 表示行の最小数を指定する整数。 負の値は許可されていません。 デフォルト値は2です
initial このプロパティがデフォルト値に設定します。 最初の記事を読みます
inherit その親要素からこのプロパティを継承します。 継承についての記事を読みます

技術的な詳細

デフォルト値: 2
戻り値: ページの下部に印刷する行の最小数を表す文字列
CSSのバージョン CSS2

<スタイルオブジェクト