AtoZ CSS Quick Tip: Using Widows and Line Breaks-CSS Tutorial-php.cn

AtoZ CSS Quick Tip: Using Widows and Line Breaks

Key Points

Avoid using <code><br> tags to force line wrapping, as this will cause text to appear inconsistently under different screen sizes. CSS is recommended to control spacing and line breaks, which provides better control and flexibility.
Use the <code>display attribute to display or hide newlines. Setting <code>display: none will not produce a line break, while <code>display: block will produce a line break. In conjunction with media queries, line breaks can be enabled or disabled under specific screen sizes.
To avoid widow lines (a single word at the end of a paragraph or title), use a line-breaking space character (<code> ) between the last two words. This ensures that the last two words are processed as one word, creating a more beautiful line break effect.

This article is part of the AtoZ CSS series. You can find other articles in the series here.

Welcome to read the next article in the AtoZ CSS series! In this series, I will explore various CSS values (and properties) that start with different letters in the alphabet. We know that sometimes screenshots are not enough, and in this post I have added a quick tip/course on leveraging newlines and avoiding widow lines. W represents widow line and line break

"Widow's Row" refers to a word that exists separately at the end of a paragraph or title.

When the last word in the text line breaks to a new line due to insufficient available width, these individual words will appear.

At least one line has two words that are more visually beautiful, and these widow lines are often considered undesirable. A agency I worked for once was so picky about them that I had a little obsessive-compulsive disorder that they didn’t appear—not that much in the text paragraphs, but avoided as much as possible in the title.

Here are some tips on removing widow lines and handling newlines.

Avoid using <code><br> tags to force line wrap.

We can force a line break by adding a line break tag to the HTML document and make sure the text is in a pleasant way.

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

Copy after login

This may look great on wide-screen devices, but if the screen is narrower, line breaks may appear in the wrong place, causing the text to look broken. For example:

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

Copy after login

This can happen if the available width can only hold the string "This is a very long title," The word "should" will naturally wrap lines, and then forced <code><br> will cause "wrap lines here" to form lines alone.

Not very good.

Do not use <code><br> tags for spacing

This is something I see a lot of novice students doing often. They just learned HTML and wanted to start separating things from each other; there are more spacing above the title, more spacing between sections or paragraphs, and so on.

This can be done by manually adding blank lines using the <code><br> tag, but spacing should always be handled by CSS. <code>margin Attributes provide better control than adding newlines using <code><br> tags, HTML is used for content, not styles.

When can I use <code><br> tag?

Generally speaking, I try to avoid using the <code><br> tag.

I'm really using newlines only when tagging poems (although the <code><code> tag here may be preferable to preserve all newlines and indents). Another place is when marking email addresses.

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

I have also used them in the footer paragraphs of the website as an easy way to quickly add copyright information.

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

Copy after login

<code><p>这是否违反了我关于不使用换行符进行样式设计的规则？也许吧。我会批评自己的。</p><code></p>Is this violated my rules regarding style design without using line breaks? Maybe. I will criticize myself. <p>

<code>display: none

Use

Hide newlines

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

<code> tags are not very useful (except for forced line breaks), and have no visual features - you cannot see them, they have no shape, Size or color, etc. <p><code><p>但是，您可以向其中一个添加一个类，并使用 <code>属性切换其换行能力。</p><code></p> However, you can add a class to one of them and switch its line wrapping ability using the display<code> property. <p><code><p>设置 <code>将不会导致换行。设置<code><code>将导致换行。这在与媒体查询结合使用时偶尔很有用，可以在特定屏幕尺寸下启用或禁用换行。

Settingsdisplay: none

display: block<code> will cause a line break. This is occasionally useful when used with media queries, enabling or disabling line breaks for specific screen sizes. <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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div>

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

<code><p> These code snippets will allow text to flow as a single line on narrow-screen devices, but for large screens, line breaks will be visible and copyrighted text will be displayed on two lines. <h2><code>

Use

Flexible removal of widows<code><p>回到我们这篇文章的开头，如果我们不应该使用<br> <code>标签来强制换行（并移除难看的寡妇行），那么我们应该使用什么呢？</p><code></p> Back to the beginning of this post, if we shouldn't use the

<code> tag to force a line break (and remove ugly widow lines), then we should What to use? <code>

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

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

Copy after login

<code>

Well, joining the last two words in the title with no line breaking space characters is a more flexible way to ensure that the text flows and lines breaks in a visually pleasing way. Please see the following tags: <code>

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

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

I added a non-line wrap space between the two words "newline" and "here", which makes them behave like a word, rather than two separated by spaces a word.

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

<code> Everything looks good if the screen is wide and there is enough room for the entire title to appear in a row. <code> If the screen width is reduced, the first available line break point is between the string "which" and the string "wraps here". This means that if there is not enough space for the entire title to appear in one line, the line will be swapped to two lines, leaving the last two words alone. Everything looks great without a widow.

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

If you want to see how this technology actually works, you can check the title on this page using the browser's developer tools. You can also try resizing the window to see how words in each title are wrapped.

FAQs about CSS Widow Lines and Breaks

What is the difference between a widow and a stolen person in CSS?

In CSS, widow rows and orphan rows refer to rows at the beginning or end of a paragraph, hanging at the top or bottom of a column, separate from the rest of the paragraph. "Widow's Row" refers to the line at the end of the paragraph, which falls at the beginning of the next page or column, and is therefore separated from the rest of the text. "Orphan" refers to the row at the beginning of a paragraph that appears alone at the bottom of a page or column.

How to control widows and orphans in CSS?

CSS provides properties called "widows" and "orphans" to control the minimum number of lines that can be left at the top or bottom of the page in a paragraph. By default, their value is set to 2, which means at least two lines in the paragraph will remain at the top or bottom of the page. You can adjust these values as needed.

What is the "line-break" attribute in CSS?

The "line-break" property in CSS specifies how to wrap Chinese, Japanese, or Korean (CJK) text. It can take values such as "auto", "loose", "normal" or "strict". Each value determines how to wrap lines in different situations, allowing control over the layout and readability of CJK text.

How does the "line-break" attribute affect non-CJK text?

The "line-break" attribute has no effect on non-CJK text. For non-CJK text, line breaks are controlled by the "white-space" attribute and the "word-break" attribute.

Can I use the "widows" and "orphans" properties for web pages?

Although the "widows" and "orphans" properties are part of the CSS specification, they were originally designed for paging media such as printing. Currently, only a few browsers support these properties for web pages. Therefore, their use in web layouts is limited and is not widely recommended.

What are the alternatives to controlling widow rows in webpage layout?

There are some techniques to control widow rows in web page layouts. A common method is to use line-breaking spaces ( ) between the last two words of a paragraph. This ensures that the last two words will stick together and will not be separated. Another way is to dynamically prevent widow lines using JavaScript or jQuery.

How to prevent line wrapping in CSS?

You can prevent line breaks in CSS by using the "white-space" property with the "nowrap" value. This will prevent the text from wrapping to the next line, forcing it to stay on a single line.

How to force a line break in CSS?

<br>Yes, you can force a line break in CSS by using the "

" HTML element or using the "content" attribute with the "A" value in the "after" or "before" pseudo-element .

How does the "line-break" attribute affect the layout of CJK text?

The "line-break" attribute significantly affects the layout and readability of CJK text. For example, the "strict" value prevents certain characters from appearing at the end or beginning of a line, which can make the text easier to read. However, it can also cause more uneven lengths.

What is the default value of the "line-break" attribute?

The default value of the "line-break" attribute is "auto". This means that the browser will determine the line break rules based on its default line break rules, which may vary between browsers.

The above is the detailed content of AtoZ CSS Quick Tip: Using Widows and Line Breaks. For more information, please follow other related articles on the PHP Chinese website!