關(guān)鍵要點

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

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

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

---

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

當文本行中的最后一個單詞由于可用寬度不足而換行到新行時，就會出現(xiàn)這些單獨的單詞。

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

以下是一些關(guān)于移除寡婦行和處理換行符的技巧。

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

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

<h1>
  這是一個很長的標題，應(yīng)該<br>
  在這里換行
</h1>

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

<code>這是一個很長的標題，
應(yīng)該
在這里換行</code>

如果可用寬度只能容納字符串“這是一個很長的標題，”，則可能會發(fā)生這種情況?！皯?yīng)該”這個詞會自然換行，然后強制的 <code><br> 會導致“在這里換行”獨自成行。

不太好。

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

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

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

什么時候可以使用 <code><br> 標簽？

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

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

<code><code>

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

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

<h1>
  這是一個很長的標題，應(yīng)該<br>
  在這里換行
</h1>

<code><p>這是否違反了我關(guān)于不使用換行符進行樣式設(shè)計的規(guī)則？也許吧。我會批評自己的。</p><code></p>這是否違反了我關(guān)于不使用換行符進行樣式設(shè)計的規(guī)則？也許吧。我會批評自己的。<p>

<code>display: none

使用

隱藏換行符

<code><p>一個 <br><code><code>標簽的作用并不大（除了強制換行），并且沒有任何視覺特征——你無法看到它們，它們沒有任何形狀、大小或顏色等等。

一個

<code>標簽的作用并不大（除了強制換行），并且沒有任何視覺特征——你無法看到它們，它們沒有任何形狀、大小或顏色等等。<p><code><p>但是，您可以向其中一個添加一個類，并使用 <code>屬性切換其換行能力。</p><code></p>但是，您可以向其中一個添加一個類，并使用display<code>屬性切換其換行能力。<p><code><p>設(shè)置 <code>將不會導致?lián)Q行。設(shè)置<code><code>將導致?lián)Q行。這在與媒體查詢結(jié)合使用時偶爾很有用，可以在特定屏幕尺寸下啟用或禁用換行。

設(shè)置display: none

display: block<code>將導致?lián)Q行。這在與媒體查詢結(jié)合使用時偶爾很有用，可以在特定屏幕尺寸下啟用或禁用換行。<pre class="brush:php;toolbar:false">&lt;code&gt;這是一個很長的標題， 應(yīng)該 在這里換行&lt;/code&gt;</pre>

<code><p>這些代碼片段將允許文本在窄屏幕設(shè)備上作為單行流動，但對于大屏幕，換行將可見，版權(quán)文本將顯示在兩行上。</p>

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

使用

靈活移除寡婦行<code><p>回到我們這篇文章的開頭，如果我們不應(yīng)該使用<br> <code>標簽來強制換行（并移除難看的寡婦行），那么我們應(yīng)該使用什么呢？</p><code></p>回到我們這篇文章的開頭，如果我們不應(yīng)該使用

<code>標簽來強制換行（并移除難看的寡婦行），那么我們應(yīng)該使用什么呢？<code>

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

<div class="site-footer">
  <p>
    由 Guy Routledge 深情創(chuàng)作<br>
    ? 2016 保留所有權(quán)利
  </p>
</div>

<code>

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

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

<code><p>如果屏幕很寬并且有足夠的空間讓整個標題顯示在一行中，一切看起來都很好。</p><code>

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

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

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

<code><code>

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

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

關(guān)于 CSS 寡婦行和換行的常見問題

CSS 中寡婦行和孤行有什么區(qū)別？

在 CSS 中，寡婦行和孤行指的是段落開頭或結(jié)尾的行，它們懸掛在列的頂部或底部，與段落的其余部分分開?！肮褘D行”指的是段落結(jié)尾的行，它落在下一頁或列的開頭，因此與其余文本分開。“孤行”指的是段落開頭的行，它獨自出現(xiàn)在頁面或列的底部。

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

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

CSS 中的“l(fā)ine-break”屬性是什么？

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

“l(fā)ine-break”屬性如何影響非 CJK 文本？

“l(fā)ine-break”屬性對非 CJK 文本沒有影響。對于非 CJK 文本，換行由“white-space”屬性和“word-break”屬性控制。

我可以將“widows”和“orphans”屬性用于網(wǎng)頁嗎？

雖然“widows”和“orphans”屬性是 CSS 規(guī)范的一部分，但它們最初是為打印等分頁媒體設(shè)計的。目前，只有少數(shù)瀏覽器支持這些屬性用于網(wǎng)頁。因此，它們在網(wǎng)頁布局中的使用受到限制，并不被廣泛推薦。

控制網(wǎng)頁布局中的寡婦行有哪些替代方法？

有一些技術(shù)可以控制網(wǎng)頁布局中的寡婦行。一種常見的方法是在段落的最后兩個單詞之間使用不換行空格 (?)。這確保最后兩個單詞將粘在一起，不會被分開。另一種方法是使用 JavaScript 或 jQuery 動態(tài)地防止寡婦行。

如何在 CSS 中防止換行？

您可以通過使用帶有“nowrap”值的“white-space”屬性來防止 CSS 中的換行。這將阻止文本換行到下一行，強制它停留在單行上。

如何在 CSS 中強制換行？

<br>是的，您可以通過使用“

”HTML 元素或在“after”或“before”偽元素中使用帶有“A”值的“content”屬性來強制 CSS 中的換行。

“l(fā)ine-break”屬性如何影響 CJK 文本的布局？

“l(fā)ine-break”屬性會顯著影響 CJK 文本的布局和可讀性。例如，“strict”值可以防止某些字符出現(xiàn)在行的結(jié)尾或開頭，這可以使文本更容易閱讀。但是，它也可能導致行長更不均勻。

“l(fā)ine-break”屬性的默認值是什么？

“l(fā)ine-break”屬性的默認值為“auto”。這意味著瀏覽器將根據(jù)其默認換行規(guī)則確定換行規(guī)則，而不同瀏覽器之間的默認換行規(guī)則可能有所不同。

以上是ATOZ CSS快速提示：使用寡婦和線路斷裂的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！