ATOZ CSS快速提示：使用寡婦和線路斷裂-css教學-PHP中文網

AtoZ CSS Quick Tip: Using Widows and Line Breaks

關鍵要點

避免使用 <code><br> 標籤強制換行，因為這會導致文本在不同屏幕尺寸下顯示不一致。建議使用 CSS 控制間距和換行，這能提供更好的控制和靈活性。
利用 <code>display 屬性顯示或隱藏換行符。設置 <code>display: none 將不會產生換行，而 <code>display: block 會產生換行。結合媒體查詢，可以在特定屏幕尺寸下啟用或禁用換行。
為避免寡婦行（段落或標題末尾的單個單詞），在最後兩個單詞之間使用不換行空格符 (<code> )。這確保最後兩個單詞作為一個單詞處理，從而創建更美觀的換行效果。

本文是 AtoZ CSS 系列的一部分。您可以在此處找到該系列的其他文章。

歡迎閱讀 AtoZ CSS 系列的下一篇文章！在本系列中，我將探索以字母表中不同字母開頭的各種 CSS 值（和屬性）。我們知道，有時屏幕截圖是不夠的，在這篇文章中，我添加了一個關於利用換行符和避免寡婦行的快速提示/課程。 W 代表寡婦行和換行符

“寡婦行”指的是段落或標題末尾單獨存在的單詞。

當文本行中的最後一個單詞由於可用寬度不足而換行到新行時，就會出現這些單獨的單詞。

至少一行有兩個單詞在視覺上更美觀，這些寡婦行通常被認為是不理想的。我曾經工作過的一家機構對它們非常挑剔，以至於我已經有點強迫症地確保它們不會出現——在文本段落中不是那麼多，但在標題中盡可能避免。

以下是一些關於移除寡婦行和處理換行符的技巧。

避免使用 <code><br> 標籤強制換行。

我們可以通過在 HTML 文檔中添加換行標籤來強制換行並確保文本以令人愉悅的方式換行。

<h1>
  这是一个很长的标题，应该<br>
  在这里换行
</h1>

登入後複製

這在寬屏幕設備上看起來可能很好，但是如果屏幕較窄，換行可能會出現在錯誤的位置，導致文本看起來斷裂。例如：

<code>这是一个很长的标题，
应该
在这里换行</code>

登入後複製

如果可用寬度只能容納字符串“這是一個很長的標題，”，則可能會發生這種情況。 “應該”這個詞會自然換行，然後強制的 <code><br> 會導致“在這裡換行”獨自成行。

不太好。

不要使用 <code><br> 標籤進行間距

這是我看到很多新手學生經常做的事情。他們剛剛學習了 HTML，並想開始將事物彼此分開；標題上方有更多間距，部分或段落之間有更多間距等等。

這可以通過手動添加空行來使用 <code><br> 標籤完成，但間距應該始終由 CSS 處理。 <code>margin 屬性比使用 <code><br> 標籤添加換行符提供了更好的控制，HTML 用於內容，而不是樣式。

什麼時候可以使用 <code><br> 標籤？

一般來說，我盡量避免使用 <code><br> 標籤。

我真正使用換行符的情況只有在標記詩歌時（儘管在這裡 <code><code> 標籤可能更可取，以保留所有換行符和縮進）。另一個地方是在標記郵件地址時。

我还曾在网站页脚的段落中使用它们，作为快速添加版权信息的简便方法。

我還曾在網站頁腳的段落中使用它們，作為快速添加版權信息的簡便方法。

<h1>
  这是一个很长的标题，应该<br>
  在这里换行
</h1>

登入後複製

<code><p>这是否违反了我关于不使用换行符进行样式设计的规则？也许吧。我会批评自己的。</p><code></p>這是否違反了我關於不使用換行符進行樣式設計的規則？也許吧。我會批評自己的。 <p>

<code>display: none

使用

隱藏換行符

<code><p>一个 <br><code><code>标签的作用并不大（除了强制换行），并且没有任何视觉特征——你无法看到它们，它们没有任何形状、大小或颜色等等。

一個

<code>標籤的作用並不大（除了強制換行），並且沒有任何視覺特徵——你無法看到它們，它們沒有任何形狀、大小或顏色等等。 <p><code><p>但是，您可以向其中一个添加一个类，并使用 <code>属性切换其换行能力。</p><code></p>但是，您可以向其中一個添加一個類，並使用display<code>屬性切換其換行能力。 <p><code><p>设置 <code>将不会导致换行。设置<code><code>将导致换行。这在与媒体查询结合使用时偶尔很有用，可以在特定屏幕尺寸下启用或禁用换行。

設置display: none

display: block<code>將導致換行。這在與媒體查詢結合使用時偶爾很有用，可以在特定屏幕尺寸下啟用或禁用換行。 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>这是一个很长的标题，应该在这里换行</code></pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>

<code><p>这些代码片段将允许文本在窄屏幕设备上作为单行流动，但对于大屏幕，换行将可见，版权文本将显示在两行上。</p>

<code><p>這些代碼片段將允許文本在窄屏幕設備上作為單行流動，但對於大屏幕，換行將可見，版權文本將顯示在兩行上。 <h2><code>

使用

靈活移除寡婦行<code><p>回到我们这篇文章的开头，如果我们不应该使用<br> <code>标签来强制换行（并移除难看的寡妇行），那么我们应该使用什么呢？</p><code></p>回到我們這篇文章的開頭，如果我們不應該使用

<code>標籤來強制換行（並移除難看的寡婦行），那麼我們應該使用什麼呢？ <code>

好吧，用不换行空格字符连接标题中的最后两个单词是确保文本以视觉上令人愉悦的方式流动和换行的一种更灵活的方法。请看以下标记：

<div class="site-footer">
  <p>
    由 Guy Routledge 深情创作<br>
    © 2016 保留所有权利
  </p>
</div>

登入後複製

<code>

好吧，用不換行空格字符連接標題中的最後兩個單詞是確保文本以視覺上令人愉悅的方式流動和換行的一種更靈活的方法。請看以下標記：<code>

我在“换行”和“在这里”这两个词之间添加了一个不换行空格，这使得它们的行为就像一个单词一样，而不是由空格分开的两个单词。

<code><p>如果屏幕很宽并且有足够的空间让整个标题显示在一行中，一切看起来都很好。</p><code>

我在“換行”和“在這裡”這兩個詞之間添加了一個不換行空格，這使得它們的行為就像一個單詞一樣，而不是由空格分開的兩個單詞。

<code><p>如果减小屏幕宽度，第一个可用的换行点是在字符串“which”和字符串“wraps here”之间。这意味着如果没有足够的空间让整个标题在一行中显示，该行将换到两行，留下最后两个单词独自一行。没有寡妇行，一切看起来都很棒。</p>

<code>如果屏幕很寬並且有足夠的空間讓整個標題顯示在一行中，一切看起來都很好。 <code>如果減小屏幕寬度，第一個可用的換行點是在字符串“which”和字符串“wraps here”之間。這意味著如果沒有足夠的空間讓整個標題在一行中顯示，該行將換到兩行，留下最後兩個單詞獨自一行。沒有寡婦行，一切看起來都很棒。

如果您想查看此技术的实际效果，您可以使用浏览器的开发者工具检查此页面上的标题。您还可以尝试调整窗口大小以查看每个标题中的单词是如何换行的。

如果您想查看此技術的實際效果，您可以使用瀏覽器的開發者工具檢查此頁面上的標題。您還可以嘗試調整窗口大小以查看每個標題中的單詞是如何換行的。

關於 CSS 寡婦行和換行的常見問題

CSS 中寡婦行和孤行有什麼區別？

在 CSS 中，寡婦行和孤行指的是段落開頭或結尾的行，它們懸掛在列的頂部或底部，與段落的其餘部分分開。 “寡婦行”指的是段落結尾的行，它落在下一頁或列的開頭，因此與其余文本分開。 “孤行”指的是段落開頭的行，它獨自出現在頁面或列的底部。

如何在 CSS 中控制寡婦行和孤行？

CSS 提供名為“widows”和“orphans”的屬性來控制段落中可以在頁面頂部或底部留下的最小行數。默認情況下，它們的值設置為 2，這意味著段落中至少有兩行將留在頁面的頂部或底部。您可以根據需要調整這些值。

CSS 中的“line-break”屬性是什麼？

CSS 中的“line-break”屬性指定如何換行中文、日文或韓文 (CJK) 文本。它可以取“auto”、“loose”、“normal”或“strict”等值。每個值都決定了在不同情況下如何換行，從而可以控制 CJK 文本的佈局和可讀性。

“line-break”屬性如何影響非 CJK 文本？

“line-break”屬性對非 CJK 文本沒有影響。對於非 CJK 文本，換行由“white-space”屬性和“word-break”屬性控制。

我可以將“widows”和“orphans”屬性用於網頁嗎？