如何在螢幕裝置上擁有 HTML 的外觀和感覺-css教學-PHP中文網

首頁

web前端

css教學

如何在螢幕裝置上擁有 HTML 的外觀和感覺

Susan Sarandon

Sep 21, 2024 am 06:26 AM

How to Have the Look and Feel of An HTML on Screen devices

如何在螢幕裝置上以 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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn