AtoZ CSS快速提示：使用寡妇和换行符

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.

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

Welcome to our next article as part of our AtoZ CSS series! In this series I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about utilizing line breaks and avoiding widows for you.

欢迎来到AtoZ CSS系列文章中的下一篇文章！ 在本系列中，我将探索不同CSS值(和属性)，每个均以不同的字母开头。 我们知道，有时截屏视频还不够，在本文中，我添加了有关使用换行符并避免寡妇的新快速提示/课程。

W是寡妇和换行符 (W is for Widows and Line Breaks)

A widow is a term used to describe a lone word at the end of a paragraph or headline.

寡妇是一个术语，用于在段落或标题的末尾描述一个单词。

These lone words occur when the last word in a line of text wraps on to a new line due to a lack of available width.

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

It’s more visually pleasing to have at least two words on a line and these widows are often seen as undesirable. An agency that I used to work at was so pedantic about them that I’ve become slightly OCD about ensuring they are nowhere to be seen – not so much in paragraphs of text but certainly in headings as far as possible.

在一行上至少包含两个单词在视觉上更令人愉悦，而这些寡妇通常被视为不受欢迎的。 我以前工作过的一家机构对它们是如此痴迷，以至于我对确保它们无处可见已经有点强迫症了-在文字段落中没有那么多，但在标题上肯定是尽可能多的。

Here are some tips for removing widows and working with line breaks.

这里是一些消除寡妇和使用换行符的技巧。

避免使用<br>标记强制换行。 (Avoid using <br> tags to force line breaks.)

We can force a line break and ensure text wraps in a pleasing way by adding a break tag into the HTML document.

我们可以通过在HTML文档中添加一个break标签来强制换行并确保文本以令人满意的方式环绕。

<h1>
  This is a long title which should<br>
  wrap here
</h1>

This might look fine on a wide screen device but if the screen is narrow, the line break may come at the wrong point, leaving the text looking broken. For example:

在宽屏设备上，这看起来似乎不错，但是如果屏幕很窄，则换行符可能会出现在错误的位置，从而使文本看起来不完整。 例如：

This is a long title which
should
wrap here

This could happen if the available width would only fit the string "This is a long title which". The word “should” would then wrap naturally and then the forced <br> would cause “wrap here” to be on its own line.

如果可用宽度仅适合字符串"This is a long title which" that "This is a long title which"可能发生这种情况。 然后，“应该”一词自然地换行，然后强制<br>导致“这里换行”按其自身行。

Not very nice.

不大好。

不要使用<br>标记来分隔 (Don’t use <br> tags for spacing)

This is something I see very new students doing a lot. They’ve just learned HTML and want to start spacing things out from each other; more spacing above headings, more spacing between sections or paragraphs etc.

我看到这是非常新的学生做的很多事情。 他们刚刚学会了HTML，并希望开始将事物彼此隔开。 标题上方的间距更大，各节或段落之间的间距更大，等等。

This can be done with <br> tags by manually adding empty lines but spacing should always be handled by CSS. The margin property gives you much more control than adding line breaks with <br> tags and HTML is for content, not for styling.

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

什么时候可以使用<br>标签？ (When can I use <br> tags?)

Generally speaking, I try and avoid using <br> tags as much as possible.

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

Really the only times I do use line breaks is when marking up poetry (although <pre> tags would probably be more preferable here to preserve all line breaks and indentations). The other place is when marking up mailing addresses.

实际上，我唯一使用换行符的时间是在标记诗歌时(尽管<pre>标签在这里可能更适合保留所有换行符和缩进)。 另一个地方是标记邮件地址。

I’ve also been known to use them in a paragraph in a website footer for a quick and dirty approach to adding copyright info.

我还知道在网站页脚的一个段落中使用它们，可以快速而又肮脏地添加版权信息。

<footer class="site-footer">
  <p>
    Lovingly created by Guy Routledge<br>
    &copy; 2016 All Rights Reserved
  </p>
</footer>

Does this break my rule about not using line breaks for styling? Perhaps. I’ll tell myself off.

这是否违反了我关于不使用换行符进行样式设置的规则？ 也许。 我告诉自己。

隐藏带display:none换行符display:none (Hide line breaks with display:none)

A <br> tag doesn’t do a huge amount (other than force a line break) and doesn’t have any visual characteristics – you can’t see them, they don’t have any shape or size or colour or anything like that.

<br>标签没有做很多事情(除了强制换行以外)，并且没有任何视觉特征-您看不到它们，它们没有任何形状，大小或颜色或类似那。

However, you can add a class to one and toggle it’s ability to break lines with the display property.

但是，您可以将一个类添加到一个类中，并通过display属性切换它的断行display 。

Setting display:none will not cause a line break. Setting display:block will cause a line break. This can occasionally be useful when combined with media queries to turn breaking on and off at certain screen sizes.

设置display:none不会导致换行。 设置display:block将导致换行。 与媒体查询结合使用时，在某些屏幕尺寸下打开和关闭时，此功能有时会很有用。

<p>
  Lovingly created by Guy Routledge

  <br class="break-large">

  &copy; 2016 All Rights Reserved
</p>

.break-large {
  display: none;
}
@media screen and (min-width: 1000px) {
  .break-large {
    display: block;
  }
}

These snippets will allow the text to flow as a single line on narrow screen devices but for large screens, the break will be visible and the copyright text will be on two lines.

这些代码片段将使文本在窄屏设备上作为一行显示，但是对于大屏幕，将显示中断，并且版权文本将显示在两行上。

使用  灵活去除寡妇 (Use   for flexibly removing widows)

Circling back to where we started this post, if we shouldn’t use <br> tags to force line breaks (and remove ugly widow words) then what should we use?

回到我们开始这篇文章的地方，如果我们不应该使用<br>标签强行换行(并删除丑陋的寡妇词)，那么我们应该使用什么呢？

Well joining the last two words in a heading with a non-breaking space character is a much more flexible way of ensuring text flows and wraps in a visually pleasing way. Take the following markup:

将最后两个单词与一个不间断的空格字符很好地结合在一起，是一种更加灵活的方式，可以确保文本以视觉上令人愉悦的方式流动和环绕。 进行以下标记：

<h1>
  This is a long title which wraps&nbsp;here
</h1>

I’ve added a non-breaking space between the words “wraps” and “here” which makes them behave as if they are a single word, rather than two that are separated by a space.

我在单词“ wraps”和“ here”之间添加了一个不间断的空格，使它们的行为就像是一个单词，而不是由空格隔开的两个单词一样。

If the screen is wide and there’s enough space for the whole heading to display in a single line, everything looks fine.

如果屏幕很宽，并且有足够的空间可以在单个行中显示整个标题，则一切看起来都很好。

If the screen width is reduced, the first available wrap point is between the string “which” and the string “wraps here”. This means that if there isn’t enough space for the whole heading to fit on a single line, the line will break on to two lines, leaving the last two words on their own. No widows and everything looks great.

如果减小了屏幕宽度，则第一个可用的换行点在字符串“哪个”和字符串“在此处包裹”之间。 这意味着，如果没有足够的空间使整个标题适合一行，则该行将分成两行，最后两个词将自己保留。 没有寡妇，一切看起来都很棒。

If you want to see this technique in action, you can use your browser’s developer tools to inspect the headings on this page. You could also try resizing the window to see how the words in each heading break.

如果您想了解这种技术的实际效果，则可以使用浏览器的开发人员工具来检查此页面上的标题。 您也可以尝试调整窗口大小，以查看每个标题中的单词如何中断。

翻译自: https://www.sitepoint.com/atoz-css-widows-and-line-breaks/