134

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Josh
  • 1,749
  • 3
  • 13
  • 14
  • 7
    @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 Jan 16 '10 at 06:21

6 Answers6

211

Use the display: inline CSS property.

Ideal: In the stylesheet:

#container p { display: inline }

Bad/Extreme situation: Inline:

<p style="display:inline">...</p>
Doug Neiner
  • 65,509
  • 13
  • 109
  • 118
  • 6
    Span is the same and doesn't go onto a new line! as `one.beat.consumer` said – Anicho Apr 26 '12 at 22:38
  • +1 Useful for saving space on mobile devices using responsive media queries :D – gef Jun 08 '13 at 11:03
  • I'm working in angularJS, and I needed to repeat a paragraph with 'ng-repeat', this worked perfectly. And Span only gave me error. – sch Jul 21 '15 at 11:33
  • 1
    One would need this when dealing with a program who's output uses

    tags as separators. Django forms for example.

     – Jim Paul Feb 23 '16 at 00:00
100

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

Steve Harrison
  • 121,227
  • 16
  • 87
  • 72
  • 2
    This should be the accepted answer. No direct answer to the question, but probably the better solution to the problem. – Fr4nc3sc0NL Mar 30 '17 at 20:27
33

I came across this for CSS,

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

via a similar Stack Overflow question.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
ackushiw
  • 1,726
  • 2
  • 14
  • 15
11

Something like

p
{
    display: inline;
}

in your stylesheet would do it for all p tags.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
John Boker
  • 82,559
  • 17
  • 97
  • 130
3

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>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ronnie Royston
  • 16,778
  • 6
  • 77
  • 91
0

I have to disagree with the currently accepted answer and other examples as they will lead to bad practices. The accepted answer is not w3c spec. The p tag is a display block element and should be used as a container for phrasing content.

If you don't want a paragraph and you need elements inline, then don't use the p tag. Use span or another option for the inline content.

starball
  • 20,030
  • 7
  • 43
  • 238
J_sdev
  • 341
  • 1
  • 13