The Content is not Wraping in <p> tag

Question

Can you please take a Look at this page (please hove over the image to see the paragraph) and let me know why the the_content() is jumping out of paragraph tag?

  echo '<p style="color:#fff !important; font-size:16px; line-height:18;">'.the_content().'</p>';

Here us the whole code

    <div class="row">
<?php
$args = array( 'post_type' => 'newArraivalsCPT', 'posts_per_page' => 1000 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
$thumb_url = $thumb_url_array[0];
   echo '<div class="col-sm-6 col-md-4">';
echo '<div class="thumbnail text-center demo-3">';
echo '<figure>';
the_post_thumbnail('', array('class' => 'img-responsive', 'href' =>$thumb_url));
//            echo '<img src="images/image1.jpg" alt=""/>';
//            echo '<img src="images/image1.jpg" alt=""/>';
            echo '<figcaption class="text-center">';
?>
            <h3 class=""><?php the_title(); ?></h3>
            <?php
                echo '<p style="color:#fff !important; font-size:16px; line-height:18;">'.the_content().'</p>';
            echo '</figcaption>';
        echo '</figure>';

 echo '<br />';

echo '<p><a href="'.$thumb_url.'" class="btn btn-sm btn-brown group1" title="Rumi Optical" role="button">Large Image</a></p>';
echo '</div>';
echo '</div>';
echo '</div>';
endwhile;

?>        

Here is an image from Chrome console

Answer 1

The function the_content() prints the content with a p tag itself. I mean, if you use

echo '<p class="our_p">' . the_content() . '</p>;

It actually outputs-

<p class="our_p"><p>lorem ipsum dolor sit amet...</p></p>

Use get_the_content() instead. It will return the unfiltered content. Something link this-

echo '<p class="our_p">' . get_the_content() . '</p>;

Codex: https://codex.wordpress.org/Function_Reference/the_content

Answer 2

First, you can almost solve this simply by not trying to concatenate the string.

echo '<p style="color:#fff !important; font-size:16px; line-height:18;">',the_content(),'</p>';

Notice that I have used commas around the_content() instead of periods. echo will take a series of comma separated arguments and print them successively.

However, the_content() runs formatting filters on the post content so you will end up with nested paragraphs tags, which is bad form.

You can use get_the_content() as already suggested in another answer... that is:

echo '<p style="color:#fff !important; font-size:16px; line-height:18;">'.get_the_content().'</p>';

But ...

An important difference from the_content() is that get_the_content() does not pass the content through the 'the_content'. This means that get_the_content() will not auto-embed videos or expand shortcodes, among other things.

https://codex.wordpress.org/Function_Reference/get_the_content

... now embeds and shortcodes don't work, nor do some formatting filters and you've potentially broken some filters added by themes and plugins too. This is not a good solution.

What you probably want is something much less complicated:

echo '<div class="figcap-content>';
  the_content();
echo '</div>';

Or, if you must cram everything onto one line:

echo '<span class="figcap-content>'.the_content().'</span>';

Use rules in your stylesheet to format the content, as you should:

.figcap-content {
  color:#fff !important; 
  font-size:16px; 
  line-height:18;
}

Answer 3

the_content() function prints the content with a p tag itself. you can use

<?php echo $post->post_content; ?>

for geting the post content.It will not add the P tag automatically.