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>

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>

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.

<code><code>

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

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

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

<code><p>這是否違反了我關于不使用換行符進行樣式設計的規(guī)則？也許吧。我會批評自己的。</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>標簽的作用并不大（除了強制換行），并且沒有任何視覺特征——你無法看到它們，它們沒有任何形狀、大小或顏色等等。

A

<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>將不會導致?lián)Q行。設置<code><code>將導致?lián)Q行。這在與媒體查詢結合使用時偶爾很有用，可以在特定屏幕尺寸下啟用或禁用換行。

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. <pre class="brush:php;toolbar:false">&lt;code&gt;這是一個很長的標題， 應該 在這里換行&lt;/code&gt;</pre>

<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 深情創(chuàng)作<br>
    ? 2016 保留所有權利
  </p>
</div>

<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.

<code><code>

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

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!