關(guān)鍵要點(diǎn)

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

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

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

---

“寡婦行”指的是段落或標(biāo)題末尾單獨(dú)存在的單詞。

當(dāng)文本行中的最后一個(gè)單詞由于可用寬度不足而換行到新行時(shí)，就會(huì)出現(xiàn)這些單獨(dú)的單詞。

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

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

避免使用 <code><br> 標(biāo)簽強(qiáng)制換行。

我們可以通過(guò)在 HTML 文檔中添加換行標(biāo)簽來(lái)強(qiáng)制換行并確保文本以令人愉悅的方式換行。

<h1>
  這是一個(gè)很長(zhǎng)的標(biāo)題，應(yīng)該<br>
  在這里換行
</h1>

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

<code>這是一個(gè)很長(zhǎng)的標(biāo)題，
應(yīng)該
在這里換行</code>

如果可用寬度只能容納字符串“這是一個(gè)很長(zhǎng)的標(biāo)題，”，則可能會(huì)發(fā)生這種情況。“應(yīng)該”這個(gè)詞會(huì)自然換行，然后強(qiáng)制的 <code><br> 會(huì)導(dǎo)致“在這里換行”獨(dú)自成行。

不太好。

不要使用 <code><br> 標(biāo)簽進(jìn)行間距

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

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

什么時(shí)候可以使用 <code><br> 標(biāo)簽？

一般來(lái)說(shuō)，我盡量避免使用 <code><br> 標(biāo)簽。

我真正使用換行符的情況只有在標(biāo)記詩(shī)歌時(shí)（盡管在這里 <code><code> 標(biāo)簽可能更可取，以保留所有換行符和縮進(jìn)）。另一個(gè)地方是在標(biāo)記郵件地址時(shí)。

<code><code>

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

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

<h1>
  這是一個(gè)很長(zhǎng)的標(biāo)題，應(yīng)該<br>
  在這里換行
</h1>

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

<code>display: none

使用

隱藏?fù)Q行符

<code><p>一個(gè) <br><code><code>標(biāo)簽的作用并不大（除了強(qiáng)制換行），并且沒(méi)有任何視覺(jué)特征——你無(wú)法看到它們，它們沒(méi)有任何形狀、大小或顏色等等。

一個(gè)

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

設(shè)置display: none

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

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

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

使用

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

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

好吧，用不換行空格字符連接標(biāo)題中的最后兩個(gè)單詞是確保文本以視覺(jué)上令人愉悅的方式流動(dòng)和換行的一種更靈活的方法。請(qǐng)看以下標(biāo)記：

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

<code>

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

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

<code><p>如果屏幕很寬并且有足夠的空間讓整個(gè)標(biāo)題顯示在一行中，一切看起來(lái)都很好。</p><code>

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

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

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

<code><code>

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

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

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

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

在 CSS 中，寡婦行和孤行指的是段落開(kāi)頭或結(jié)尾的行，它們懸掛在列的頂部或底部，與段落的其余部分分開(kāi)?！肮褘D行”指的是段落結(jié)尾的行，它落在下一頁(yè)或列的開(kāi)頭，因此與其余文本分開(kāi)?！肮滦小敝傅氖嵌温溟_(kāi)頭的行，它獨(dú)自出現(xiàn)在頁(yè)面或列的底部。

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

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

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

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

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

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

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

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

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

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

如何在 CSS 中防止換行？

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

如何在 CSS 中強(qiáng)制換行？

<br>是的，您可以通過(guò)使用“

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

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

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

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

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

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