Can’t use the nowrap attribute? Explain how to prevent automatic line breaks using CSS!

Text in HTML code auto-wraps at the edges of elements unless otherwise instructed.

If you want to remove this automatic line break, you used the nowrap attribute in previous HTML, but in the current HTML5, this attribute is abolished.

This time, I will introduce a method to prevent automatic line breaks by using the alternative CSS “white-space:nowrap”.

About the deprecated nowrap attribute

Before I show you how to use CSS, I want to mention the nowrap attribute.

Previously, the nowrap attribute was used in HTML tags to prevent automatic line breaks of text within cells.

Specifically, it is described as follows.

<table border="1">
<tr>
<th>見出し1</th>
<th nowrap="nowrap">見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
</table>

You specify “nowrap=”nowrap”” in one of the th elements.

If you specify the nowrap attribute, even if the width of the cell is small, the text will not break and the width of the cell will be adjusted.

This method is deprecated in HTML5 and cannot be used . Also, in HTML5, it is recommended to use CSS to specify appearance .

Let’s set the borders of the above table using CSS instead of writing them in tags.

How to get rid of automatic line breaks in CSS

Now, I will show you how to eliminate automatic line breaks using CSS.

You can use this method when you want to display the text in the table cell as described above on one line, or when you don’t want to break lines where you don’t want them.

Let’s actually write.

<p class="sample">横幅を指定しておき、「white-space:nowrap」を追加したときの違いを比べてみてください。</p>

.sample {
  width:150px;
  background: skyblue;
  white-space: nowrap;
}

If the CSS is written as above, the text will be displayed on one line without line breaks. I added a background color to make it easier to understand.

Let’s see the difference between with and without “white-space:nowrap” in CSS.

Otherwise, the text will automatically wrap at the edge of the element.

Other values ​​of white-space

Other values ​​for white-space include: I will touch on it easily.

Whether or not to automatically break lines at the end of an element, and how spaces, tabs, and line breaks are handled have changed.

nowrap differs from the default normal only in whether or not it wraps automatically .

About the processing of the part protruding from the element

I’ve found that specifying “white-space:nowrap” eliminates the automatic line breaks in the text.

When the width of the element is specified, this text will protrude.

Use CSS overflow to handle this overhang .

<p class="sample">CSSのoverflowを用いて、はみ出た部分の処理を設定します。<br>scrollを指定するとスクロールバーが表示され、操作して全体を見ることができます。<br>今回はbrタグで改行の位置を決めています。</p>

.sample {
  white-space: nowrap;
  overflow: scroll;
  width: 250px;
  background: skyblue;
}

A scroll bar appears, allowing you to scroll horizontally.

If you specify a smaller height, you will also be able to scroll vertically.

If you specify “overflow: hidden”, the overflowing part will be hidden. It is used when you want to hide something that protrudes from the size of the element.

Also, overflow can be specified separately for the X direction (horizontal direction) and Y direction (vertical direction).

.sample {
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 250px;
  height: 60px; 
  background: skyblue;
}

Here, the protruding part in the horizontal direction is hidden, and the vertical direction can be scrolled.

Please try various things.

Summary: Use “white-space:nowrap” to get rid of automatic line breaks

This time, I explained the CSS “white-space:nowrap” as a method to prevent automatic line breaks .

We also introduced other values ​​for white-space.

Another important CSS property is overflow, which we used to handle the overhangs, so keep that in mind.