CODEWITHSUNDEEP
htmlcss
Flint_Lockwood
Flint_Lockwood

Reputation: 165

How to join paragraph in HTML without removing <p> tag

I have created code to print some data.

<!DOCTYPE html>
<html>
<body>

<h1>The p element</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

This give me a result below:

The p element
This is a paragraph.

This is a paragraph.

This is a paragraph.

But what i want to do is to join this three lines without removing <p> tag.

My expected result is:

The p element
This is a paragraph. This is a paragraph. This is a paragraph.

Upvotes: 2

Views: 508

Answers (5)

Edvaldo Filho
Edvaldo Filho

Reputation: 421

Use display: flex and flex-direction: row , optionaly can include gap :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>The p element</title>
    <style>
        .wrapper {
            display: flex;
            flex-direction: row;
            gap: 4px;
        }
    </style>
</head>
<body>
    <h1>The p element</h1>
    <div class="wrapper">
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div>
</body>
</html>

See details here

Upvotes: 2

A Haworth
A Haworth

Reputation: 36512

THere is no need to add to the DOM in order to achieve this, and to keep your semantics as they are you probably shouldn't.

Instead CSS can be used to make the p elements display inline-block.

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      display: inline-block;
    }
  </style>
</head>

<body>

  <h1>The p element</h1>

  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>

</body>

</html>

Upvotes: 3

amel
amel

Reputation: 1154

You can add display:inline for p tag:

p {
display: inline
}
<!DOCTYPE html>
<html>
  <body>
    <h1>The p element</h1>

    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
  </body>
</html>

Upvotes: 2

Maxime Pillier
Maxime Pillier

Reputation: 78

You can change css like this :

p {
    display: inline;
}

Upvotes: 4

Coolis
Coolis

Reputation: 554

As mentioned above, changing a bit the structure should do the trick. Just wrap your three p elements into a div and use flexbox.

.wrapper {
  display: flex;
  align-items: center;
}
<h1>The p element</h1>

<div class="wrapper">
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
</div>

Upvotes: 6

Related Questions