首頁 > web前端 > css教學 > 如何在螢幕裝置上擁有 HTML 的外觀和感覺

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

Susan Sarandon
發布: 2024-09-21 06:26:32
原創
964 人瀏覽過

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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板