ホームページ > ウェブフロントエンド > CSSチュートリアル > HTML でページ番号を印刷できない理由とその回避策は何ですか?

HTML でページ番号を印刷できない理由とその回避策は何ですか?

Susan Sarandon
リリース: 2024-12-14 14:47:11
オリジナル
667 人が閲覧しました

Why Can't I Print Page Numbers in HTML and What's the Workaround?

HTML ページにページ番号を印刷できません?

問題の説明:

広範囲に調査したにもかかわらず、ページ番号が印刷されませんHTML ドキュメントを印刷するときに表示されます。

CSS コード使用:

@page {
  margin: 10%;
  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}
ログイン後にコピー

@page ルールが @media all ブロッ​​クの内側と外側の両方で試みられましたが、無駄でした。

解決策:

Web ブラウザの制限により、@page を使用してページ番号を実装することは実現できません。代替ソリューションは Oliver Kohll によって提供されており、これは CSS に依存せずにテーブルベースの書式設定を利用します。 @page:

CSS:

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}
ログイン後にコピー

HTML:

<div>
ログイン後にコピー

カスタマイズ:

ページ番号の外観は次のようにカスタマイズできます。 #pageFooter のプロパティ (テキストの書式設定、位置、背景のスタイルなど) を変更します。

以上がHTML でページ番号を印刷できない理由とその回避策は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート