how to avoid a new line with p tag?

121
votes

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

5
htmlcsstags
want to create a carousel with a image and text – Josh
@Nishant: Then use, say, <span>. <p> is meant for paragraphs. – Steve Harrison
@Nishant: When you have to force a tag to behave a certain way (such as making it display: inline; rather than display: block;), it's a good indication that you might be using the wrong tag... – Steve Harrison
@Nishant is it me? – Nishant Kumar

5 Answers

191
votes

Use the display: inline CSS property.

Ideal: In the stylesheet:

#container p { display: inline }

Bad/Extreme situation: Inline:

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

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

28
votes

I came across this for css

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

via similar stackoverflow question

6
votes

something like:

p
{
    display:inline;
}

in your stylesheet would do it for all p tags.

3
votes

Flexbox works.

.box{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  align-items:center;
  border:1px solid #e3f2fd;
}
.item{
  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>
</div>