How to avoid a new line with the 'p' tag


Html Problem Overview

How can I stay on the same line while working with the <p> tag?

I want to create a carousel with an image and text.

Html Solutions

Solution 1 - Html

Use the display: inline CSS property.

Ideal: In the stylesheet:

#container p { display: inline }

Bad/Extreme situation: Inline:

<p style="display:inline">...</p>

Solution 2 - Html

The <p> paragraph tag is meant for specifying paragraphs of text. If you don't want the text to start on a new line, I would suggest you're using the <p> tag incorrectly. Perhaps the <span> tag more closely fits what you want to achieve...?

Solution 3 - Html

I came across this for CSS,

span, p{overflow: hidden; white-space: nowrap;}

via a similar Stack Overflow question.

Solution 4 - Html

Something like

    display: inline;

in your stylesheet would do it for all p tags.

Solution 5 - Html

Flexbox works.

  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  border: 1px solid #e3f2fd;
  flex: 1 1 auto;
  border: 1px solid #ffebee;

<div class="box">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJoshView Question on Stackoverflow
Solution 1 - HtmlDoug NeinerView Answer on Stackoverflow
Solution 2 - HtmlSteve HarrisonView Answer on Stackoverflow
Solution 3 - HtmlackushiwView Answer on Stackoverflow
Solution 4 - HtmlJohn BokerView Answer on Stackoverflow
Solution 5 - HtmlRonnie RoystonView Answer on Stackoverflow