web-dev-qa-db-ja.com

CSS-総ページ数を数える方法は？

PDFファイルのページ数を表示しようとしています。

だから私はヘッダーにこのcssを入れました：

.page-number:after { 
  counter-increment: pages; 
  content: counter(page) " of " counter(pages); 
 }

HTML：

<span class="page-number">Page </span>

しかし、それは私を返しますPage 1 of 1 ... Page 2 of 2。最初のカウンターは正常に機能しますが、合計が間違っています。どうすればそれを解決できますか？

htmlcsscss-print
4
user3242861

CSSカウンターでカウンターの合計を取得する方法はないため、必要な出力を取得するために考えられる唯一の方法は、HTMLを複製することです（コンテンツが動的に生成される場合、これは大きな問題ではない可能性があります）。 HTMLを1回出力して合計ページ数を取得し、次にもう一度出力して現在のページを取得します。

#pageCounter {
  counter-reset: pageTotal;
}
#pageCounter span {
  counter-increment: pageTotal; 
}
#pageNumbers {
  counter-reset: currentPage;
}
#pageNumbers div:before { 
  counter-increment: currentPage; 
  content: "Page " counter(currentPage) " of "; 
}
#pageNumbers div:after { 
  content: counter(pageTotal); 
}
<div id="pageCounter">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<div id="pageNumbers">
  <div class="page-number"></div>
  <div class="page-number"></div>
  <div class="page-number"></div>
  <div class="page-number"></div>
</div>
3
Hidden Hobbes
.page{
counter-reset: page;
}
.page .page-number{
  display:block;
  }
.page .page-number:after{
counter-increment: page;
content:counter(page);
}
.page:after{
    display: block;
    content: "Number of pages: " counter(page);
}
<div class="page">
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
</div>
0
Raj