How to display HTML without line breaks?

If you specify a width for the “p” element or “div” element in HTML, if the text set inside exceeds the width, it will be automatically displayed with a line break.
Line breaks may cause problems such as the design breaking down or the balance being lost when placed side by side.

In this article, I will introduce how to prohibit line breaks using CSS and display techniques related to it.

How to make characters in an element non-breaking

First, let’s see what it looks like if nothing is set.

CSS

p {
  border: solid 1px gray;
  padding: 0.4em;
  width: 500px;
}

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

You can see that the line breaks are displayed with the width of “500px” set for the element.
Now let’s change this to no newlines.

The easiest way to disable line breaks is to use CSS “white-space: nowrap” .
Let’s rewrite the CSS like this:

CSS

p {
  border: solid 1px gray;
  padding: 0.4em;
  width: 500px;
  white-space: nowrap;
}

In this way, the element is not broken and is displayed outside the element.

Techniques for successfully displaying non-breaking content

The line break prohibition method I introduced this time does not look good because it protrudes from the frame.
So you have to somehow control non-breaking strings.

Here are some methods for string controls.

Technique 1: Scroll the part that cannot be displayed

The first technique is to scroll the protruding part.
Let’s add “overflow-x: scroll” to CSS.

CSS

p {
  border: solid 1px gray;
  padding: 0.4em;
  width: 500px;
  white-space: nowrap;
  overflow-x: scroll;
}

This will allow you to view the full text by scrolling horizontally.
The horizontal scrolling is introduced in the following article.

Technique 2: Omit

The next technique to introduce is to use “…” to omit the display content.
If you use this method, you need to be careful because the full text will not be displayed, but it is an effective technique because it can unify the design for menu-type screens such as cards and carousels.

To omit it, change the CSS like this:

CSS

p {
  border: solid 1px gray;
  padding: 0.4em;
  width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

By doing this, you can display neatly without line breaks for the size of the frame.
However, with this method, the omitted part cannot be confirmed without looking at the source.

What if you want to display the whole?

If you want to display the entire abbreviated text, you can use the “title” attribute to display the full text on mouseover.
By adding the following JavaScript, the entire text of the omitted p element will be displayed on mouseover.

JavaScript

window.onload = function(){
  // p要素を検索
  document.querySelectorAll('p').forEach(function(elem) {
    // 内部要素を取得
    const text = elem.innerText;
    // tooltipとして設定
    elem.title = text;
  });
}

summary

I introduced how to display HTML without line breaks.

Displaying elements with a fixed width is often necessary in screen design.
How to handle long elements is also a part of the design, so use them according to the situation.