ATOZ CSS快速提示：使用寡妇和线路断裂

关键要点

• 避免使用 <code><br> 标签强制换行，因为这会导致文本在不同屏幕尺寸下显示不一致。 建议使用 CSS 控制间距和换行，这能提供更好的控制和灵活性。
• 利用 <code>display 属性显示或隐藏换行符。设置 <code>display: none 将不会产生换行，而 <code>display: block 会产生换行。结合媒体查询，可以在特定屏幕尺寸下启用或禁用换行。
• 为避免寡妇行（段落或标题末尾的单个单词），在最后两个单词之间使用不换行空格符 (<code> )。这确保最后两个单词作为一个单词处理，从而创建更美观的换行效果。

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

欢迎阅读 AtoZ CSS 系列的下一篇文章！在本系列中，我将探索以字母表中不同字母开头的各种 CSS 值（和属性）。我们知道，有时屏幕截图是不够的，在这篇文章中，我添加了一个关于利用换行符和避免寡妇行的快速提示/课程。W 代表寡妇行和换行符

---

“寡妇行”指的是段落或标题末尾单独存在的单词。

当文本行中的最后一个单词由于可用宽度不足而换行到新行时，就会出现这些单独的单词。

至少一行有两个单词在视觉上更美观，这些寡妇行通常被认为是不理想的。我曾经工作过的一家机构对它们非常挑剔，以至于我已经有点强迫症地确保它们不会出现——在文本段落中不是那么多，但在标题中尽可能避免。

以下是一些关于移除寡妇行和处理换行符的技巧。

避免使用 <code><br> 标签强制换行。

我们可以通过在 HTML 文档中添加换行标签来强制换行并确保文本以令人愉悦的方式换行。

<code class="language-html"><h1>
  这是一个很长的标题，应该<br>
  在这里换行
</h1></code>

这在宽屏幕设备上看起来可能很好，但是如果屏幕较窄，换行可能会出现在错误的位置，导致文本看起来断裂。例如：

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

如果可用宽度只能容纳字符串“这是一个很长的标题，”，则可能会发生这种情况。“应该”这个词会自然换行，然后强制的 <code><br> 会导致“在这里换行”独自成行。

不太好。

不要使用 <code><br> 标签进行间距

这是我看到很多新手学生经常做的事情。他们刚刚学习了 HTML，并想开始将事物彼此分开；标题上方有更多间距，部分或段落之间有更多间距等等。

这可以通过手动添加空行来使用 <code><br> 标签完成，但间距应该始终由 CSS 处理。<code>margin 属性比使用 <code><br> 标签添加换行符提供了更好的控制，HTML 用于内容，而不是样式。

什么时候可以使用 <code><br> 标签？

一般来说，我尽量避免使用 <code><br> 标签。

我真正使用换行符的情况只有在标记诗歌时（尽管在这里 <code><code> 标签可能更可取，以保留所有换行符和缩进）。另一个地方是在标记邮件地址时。

<code><code>

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

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

<code class="language-html"><h1>
  这是一个很长的标题，应该<br>
  在这里换行
</h1></code>

<code><p>这是否违反了我关于不使用换行符进行样式设计的规则？也许吧。我会批评自己的。</p><code>

这是否违反了我关于不使用换行符进行样式设计的规则？也许吧。我会批评自己的。

<code>display: none

使用 隐藏换行符

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

一个<code>标签的作用并不大（除了强制换行），并且没有任何视觉特征——你无法看到它们，它们没有任何形状、大小或颜色等等。<p></p><code><p>但是，您可以向其中一个添加一个类，并使用</p> <code>属性切换其换行能力。<code>但是，您可以向其中一个添加一个类，并使用display<code>属性切换其换行能力。<p></p><code><p>设置</p> <code>将不会导致换行。设置<code><code>将导致换行。这在与媒体查询结合使用时偶尔很有用，可以在特定屏幕尺寸下启用或禁用换行。设置display: nonedisplay: block<code>将导致换行。这在与媒体查询结合使用时偶尔很有用，可以在特定屏幕尺寸下启用或禁用换行。<pre class="brush:php;toolbar:false">&lt;code&gt;这是一个很长的标题， 应该 在这里换行&lt;/code&gt;</pre>

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

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

<code> 使用

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

<code>回到我们这篇文章的开头，如果我们不应该使用

<code>标签来强制换行（并移除难看的寡妇行），那么我们应该使用什么呢？<code>

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

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

<code>

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

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

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

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

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

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

<code><code>

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

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

关于 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”属性用于网页吗？

虽然“widows”和“orphans”属性是 CSS 规范的一部分，但它们最初是为打印等分页媒体设计的。目前，只有少数浏览器支持这些属性用于网页。因此，它们在网页布局中的使用受到限制，并不被广泛推荐。

控制网页布局中的寡妇行有哪些替代方法？

有一些技术可以控制网页布局中的寡妇行。一种常见的方法是在段落的最后两个单词之间使用不换行空格 ( )。这确保最后两个单词将粘在一起，不会被分开。另一种方法是使用 JavaScript 或 jQuery 动态地防止寡妇行。

如何在 CSS 中防止换行？

您可以通过使用带有“nowrap”值的“white-space”属性来防止 CSS 中的换行。这将阻止文本换行到下一行，强制它停留在单行上。

如何在 CSS 中强制换行？

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

”HTML 元素或在“after”或“before”伪元素中使用带有“A”值的“content”属性来强制 CSS 中的换行。

“line-break”属性如何影响 CJK 文本的布局？

“line-break”属性会显着影响 CJK 文本的布局和可读性。例如，“strict”值可以防止某些字符出现在行的结尾或开头，这可以使文本更容易阅读。但是，它也可能导致行长更不均匀。

“line-break”属性的默认值是什么？

“line-break”属性的默认值为“auto”。这意味着浏览器将根据其默认换行规则确定换行规则，而不同浏览器之间的默认换行规则可能有所不同。

以上是ATOZ CSS快速提示：使用寡妇和线路断裂的详细内容。更多信息请关注PHP中文网其他相关文章！