如何在螢幕裝置上擁有 HTML 的外觀和感覺
- Susan Sarandon原創
- 2024-09-21 06:26:32991瀏覽
如何在螢幕裝置上以 HTML 形式呈現 A4 的外觀
我開始使用老式 HTML 頁面建立我的履歷，但很快就意識到在螢幕上開啟時它無法開箱即用。內容源源不斷地流動，沒有任何分頁符，而且它看起來根本不像 A4 文件。為了解決這個問題，我必須應用一些技巧，包括一些 CSS 和一些 JavaScript。
我的目標是：
- 讓我的履歷在螢幕上看起來與列印時一樣。
- 在螢幕上顯示單獨的頁面，就像 PDF 或 Google 文件文件一樣。
使用 HTML 建立履歷時面臨的挑戰
當我開始寫履歷時，我很快意識到螢幕裝置上的瀏覽器不支援 A4 等頁面尺寸。相反，它們只是連續地流動內容，這意味著文字和部分可以溢出而沒有任何分頁符號。要根據 A4 尺寸建立不同的頁面，每當內容超出典型 A4 頁面的高度時，我必須手動處理分頁符號。
主要解決方案涉及使用 CSS @media print 和分頁符號屬性來控制內容在一頁太長時的行為方式，並應用 JavaScript 來處理螢幕上的動態內容。
1. 使用 CSS 自動分頁（用於列印）
為了確保列印時內容正確流動，我使用了 page-break-inside:void 屬性。此屬性可防止在兩個頁面之間拆分標題或大段落等重要元素，從而允許瀏覽器根據需要自動將內容分成頁面。
用於列印的 HTML 範例：
<!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>
用於列印的 CSS：
/* 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 是如何運作的：
- page-break-after：always； 確保在列印模式下每個 .page div 後內容將分成新頁面。
- page-break-inside：避免； 防止標題或大的部分在兩頁之間尷尬地分割，這對於在列印時保持乾淨、專業的外觀至關重要。
2. 使用 JavaScript 處理畫面上的分頁符號
雖然 CSS 可以處理列印時的分頁符，但 螢幕裝置 的工作方式不同。瀏覽器不會自動將內容分成螢幕上的不同頁面，因此我需要 JavaScript 來偵測內容何時超出 A4 頁面大小，並將其動態分割為新頁面。
這是我的方法：
用於動態頁面分割的 JavaScript：
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);
}
為什麼需要 JavaScript：
與列印不同，在螢幕上，文字溢位時不會自動從一個 .page div 流到下一個 .page div。瀏覽器只是讓內容溢出到頁面邊界之外。透過上面的 JavaScript 程式碼，我可以偵測內容何時溢出並將其拆分為新頁面，模擬您在 PDF 或 Google 文件中期望的多頁面體驗。
3. 確保螢幕和列印頁面流一致
透過這種方法，內容在不同裝置上表現一致：
螢幕上：JavaScript 偵測內容溢位並依需求建立其他 .page div。這模擬了查看 A4 文件的體驗，您可以在整齊劃分的頁面之間捲動。
列印：CSS @media 列印和分頁符號屬性處理列印時的自動分頁符，因此您的文件在紙上看起來就像精美的一樣。
結論
建立模仿 A4 頁面在螢幕裝置上的外觀和感覺的 HTML 文件需要結合使用 CSS 和 JavaScript。雖然 CSS 本身就可以有效地處理列印方面的問題，但 JavaScript 對於管理螢幕上的分頁符號至關重要。透過將兩者結合起來，您可以確保無縫體驗，無論是在螢幕上還是在列印中，文字都整齊地跨頁面流動。
以上是如何在螢幕裝置上擁有 HTML 的外觀和感覺的詳細內容。更多資訊請關注PHP中文網其他相關文章！