How to Make Text Appear on the Same Line in CSS?

To make text appear on the same line in CSS, you typically need to change the display property of the elements containing the text from their default block-level behavior to an inline or inline-block behavior.

The primary way to make multiple HTML elements (which contain text) appear on the same horizontal line using CSS is by modifying their default display property. Elements like div and p are block-level by default, meaning they start on a new line and take up the full width available. To place them side-by-side, you need to change this.

According to the reference, if all the text has to be on one line, you must set the div and p elements to inline or inline-block. The span and a elements, being inline by default, already exhibit this behavior.

Let's look at the two main display values that achieve this:

• display: inline;
• display: inline-block;

Using display: inline;

When you set an element's display to inline, it behaves like a <span> element. It flows horizontally next to other inline or inline-block elements and only takes up as much width as its content requires.

Characteristics of display: inline;:

• Elements sit next to each other on the same line.
• Width and height properties are ignored.
• Top and bottom margins/padding are ignored (left/right are respected).

Example CSS:

.inline-text {
  display: inline;
  /* Example styling */
  margin-right: 10px;
}

Example HTML:

<div class="inline-text">This text</div>
<div class="inline-text">will be</div>
<div class="inline-text">on the same line.</div>

Using display: inline-block;

Setting an element's display to inline-block is similar to inline, but with a crucial difference: it allows you to set width and height, and vertical margins/padding are respected. The element still flows horizontally with others.

Characteristics of display: inline-block;:

• Elements sit next to each other on the same line.
• Width and height properties are respected.
• All margins and padding are respected.

Example CSS:

.inline-block-text {
  display: inline-block;
  /* Example styling */
  width: 150px;
  padding: 10px;
  border: 1px solid #ccc;
  margin-right: 10px;
}

Example HTML:

<div class="inline-block-text">Block 1</div>
<div class="inline-block-text">Block 2</div>
<div class="inline-block-text">Block 3</div>

This method is often preferred when you need more control over the dimensions and spacing of the elements while keeping them horizontal.

Default Inline Elements

As mentioned in the reference, some elements are already inline by default, including:

• <span>
• <a>
• <strong>
• <em>
• <img>

You don't need to change their display property to make them appear next to each other (unless a parent container forces a different layout or you want block-level behavior).

Comparing inline vs. inline-block

Here's a quick comparison:

Preventing Text Wrapping

If the total width of the inline or inline-block elements exceeds the width of their containing element, the text will naturally wrap to the next line. To force all text onto a single, potentially very long line regardless of container width, you can apply white-space: nowrap; to the container element.

Example CSS:

.container {
  white-space: nowrap; /* Prevents wrapping */
  overflow-x: auto;   /* Adds horizontal scrollbar if needed */
}

.inline-item {
  display: inline-block; /* Or inline */
  /* ... other styles ... */
}

Example HTML:

<div class="container">
  <span class="inline-item">This is the first item.</span>
  <span class="inline-item">This is the second item.</span>
  <span class="inline-item">This is a very long third item that will force the line to extend beyond the container width if nowrap is used.</span>
  <span class="inline-item">Fourth item.</span>
</div>

This ensures all inline-item elements stay on one line, with a scrollbar appearing if necessary.

In summary, to make text within different elements appear on the same line in CSS, the most common and direct method is to set the display property of those elements to either inline or inline-block.