一千萬個為什麽

搜索

我怎樣才能防止喪偶/孤兒頭?



我有一章對50個州的每個州都有簡要的介紹。每個部分都以h4標簽中的州名開頭。

當我預覽我的書時,我有時會看到頁面底部的標題,下一頁的下一段。

我嘗試在一個div中包裝標題和以下段落,像這樣...

<div class="Widow">
  

Maine

  
This is a paragraph. </div>

然後應用這種風格:

div.Widow { widows: 3; }

我也改變了寡婦:3到孤兒:3,只是為了確保我沒有倒退。但它不起作用。

任何人都可以提出另一種粘合段落到頭部的策略嗎?

轉載註明原文: 我怎樣才能防止喪偶/孤兒頭?

一共有 2 個回答:

我會用

h4 {page-break-after: avoid;}

p {
  widows: 2;
  orphans: 2;
}

我認為這適用於Kindles以及epubs。這只是示例代碼。我的猜測是,這是結構化的內容,你會想在h4下面的段落中使用特殊的類。

如果Kindle電子墨水設備在div內使用時不支持此css屬性,我不會感到驚訝 - 僅適用於h1或p。

上次我查看Google Play圖書似乎並沒有正確呈現這個CSS屬性(盡管我最近沒有檢查過)。

Sekhemty的解決方案也可能起作用,但是當epub閱讀器和kindle設備不支持這些css屬性時使用它。現在他們做到了。

閱讀本文中有關此主題的更多信息 https:// medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219#.tzhyw83kh (約下降2/3)。

根據這篇博客文章,您應該在包含頭和段落的 div 選擇器上使用 display:inline-block 屬性。


這篇文章摘錄如下:

如果將 divdisplay 屬性設置為 inline-block ,   iBooks將在a上顯示整個 div 的內容   單頁,如有必要跳到新頁面,除非整個頁面   div 不能放在頁面上,在這種情況下,它會被分割   跨頁面。

     

它很簡單而且非常強大: div {display:inline-block}

     

這是一個不帶 inline-block 顯示的簡短文檔。註意如何   標題與後面的段落分開,甚至如何   背景的一部分流向下一頁。 Icks。該   圖像和標題同樣是分開的。可怕!

     

     

     

以下是一個包​​含標題和 div 的完全相同的文檔   段落和第二個 div 封閉了圖片和標題。都    div 被設置為 display:inline-block 。結果?再見寡婦   和孤兒:

     

     

     

你可以在哪裏使用這個?如這裏所示,如果你有一系列的   帶有標題的插圖,請使用 inline-block 來保留標題   正好在插圖下。

     

如果您希望標題永遠不會單獨出現在頁面底部,   但總是至少有一個段落,只是附上   頭文件和 inline-block div 中的段落。


我已鏈接的文章還包含兩個epub文件,可用作這些示例的參考。