我開始使用老式 HTML 頁面建立我的履歷,但很快就意識到在螢幕上開啟時它無法開箱即用。內容源源不斷地流動,沒有任何分頁符,而且它看起來根本不像 A4 文件。為了解決這個問題,我必須應用一些技巧,包括一些 CSS 和一些 JavaScript。
我的目標是:
當我開始寫履歷時,我很快意識到螢幕裝置上的瀏覽器不支援 A4 等頁面尺寸。相反,它們只是連續地流動內容,這意味著文字和部分可以溢出而沒有任何分頁符號。要根據 A4 尺寸建立不同的頁面,每當內容超出典型 A4 頁面的高度時,我必須手動處理分頁符號。
主要解決方案涉及使用 CSS @media print 和分頁符號屬性來控制內容在一頁太長時的行為方式,並應用 JavaScript 來處理螢幕上的動態內容。
為了確保列印時內容正確流動,我使用了 page-break-inside:void 屬性。此屬性可防止在兩個頁面之間拆分標題或大段落等重要元素,從而允許瀏覽器根據需要自動將內容分成頁面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>A4 Styled Document</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="page"> <h1>Title of Page 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> </div> <div class="page"> <h1>Title of Page 2</h1> <p>Content will automatically break into new pages for printing...</p> </div> </body> </html>
/* Define page layout for A4 size */ @media print { body { margin: 0; padding: 0; } .page { width: 210mm; height: 297mm; margin: 0; padding: 20mm; page-break-after: always; /* Automatically breaks after each page */ box-shadow: none; overflow: visible; /* Ensures content flows properly when printing */ } /* Prevent page breaks inside headers or large paragraphs */ h1, h2, h3, p { page-break-inside: avoid; } }
雖然 CSS 可以處理列印時的分頁符,但 螢幕裝置 的工作方式不同。瀏覽器不會自動將內容分成螢幕上的不同頁面,因此我需要 JavaScript 來偵測內容何時超出 A4 頁面大小,並將其動態分割為新頁面。
這是我的方法:
window.onload = function () { const pages = document.querySelectorAll('.page'); pages.forEach(page => { if (page.scrollHeight > page.clientHeight) { splitPageContent(page); } }); }; function splitPageContent(page) { const newPage = document.createElement('div'); newPage.classList.add('page'); const contentToMove = page.innerHTML.slice(page.clientHeight / 2); newPage.innerHTML = contentToMove; page.innerHTML = page.innerHTML.slice(0, page.clientHeight / 2); // Insert the new page into the DOM after the current page page.parentNode.insertBefore(newPage, page.nextSibling); }
與列印不同,在螢幕上,文字溢位時不會自動從一個 .page div 流到下一個 .page div。瀏覽器只是讓內容溢出到頁面邊界之外。透過上面的 JavaScript 程式碼,我可以偵測內容何時溢出並將其拆分為新頁面,模擬您在 PDF 或 Google 文件中期望的多頁面體驗。
透過這種方法,內容在不同裝置上表現一致:
螢幕上:JavaScript 偵測內容溢位並依需求建立其他 .page div。這模擬了查看 A4 文件的體驗,您可以在整齊劃分的頁面之間捲動。
列印:CSS @media 列印和分頁符號屬性處理列印時的自動分頁符,因此您的文件在紙上看起來就像精美的一樣。
建立模仿 A4 頁面在螢幕裝置上的外觀和感覺的 HTML 文件需要結合使用 CSS 和 JavaScript。雖然 CSS 本身就可以有效地處理列印方面的問題,但 JavaScript 對於管理螢幕上的分頁符號至關重要。透過將兩者結合起來,您可以確保無縫體驗,無論是在螢幕上還是在列印中,文字都整齊地跨頁面流動。
以上是如何在螢幕裝置上擁有 HTML 的外觀和感覺的詳細內容。更多資訊請關注PHP中文網其他相關文章!