HTML paragraph

      No Comments on HTML paragraph

The HTML paragraph (<p>) element represents a paragraph of text. Paragraphs are usually represented in visual media as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation. Paragraphs are block-level elements.

For example:
<p>This is the first paragraph of text.
  This is the first paragraph of text.
  This is the first paragraph of text.
  This is the first paragraph of text.</p>
<p>This is the second paragraph.
 This is the second paragraph.
 This is the second paragraph.
 This is the second paragraph.</p>
Output:

This is the first paragraph of text.This is the first paragraph of text.This is the first paragraph of text.This is the first paragraph of text.

This is the second paragraph.This is the second paragraph. This is the second paragraph.This is the second paragraph.

HTML paragraph – the problem

The <p> element does not retain white spaces or line breaks.

For example:
<p>A steel hush freezes the trees.
It is my mind stretched to stiff lace,
And draped on high wide thoughts.

My soul is a large sallow park
And people walk on it, as they do on the park before me.
They numb my levelness with dumb feet,
Yet I cannot even hate them.</p>
Result:

A steel hush freezes the trees.It is my mind stretched to stiff lace,And draped on high wide thoughts.My soul is a large sallow parkAnd people walk on it, as they do on the park before me.They numb my levelness with dumb feet,Yet I cannot even hate them.

Solution to the <p> problem- using <pre>

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Solution to above problem
A steel hush freezes the trees.
It is my mind stretched to stiff lace,
And draped on high wide thoughts.

My soul is a large sallow park
And people walk on it, as they do on the park before me.
They numb my levelness with dumb feet,
Yet I cannot even hate them.

Trick to get rid off <pre> tag

<pre> is basically saying

<div style="white-space:pre">;

. Therefore, one can use the css property

white-space:pre;

to retain white spaces in the paragraphs and bypass <pre>. For eg:

<p style="white-space:pre">s   c   a    n   f   c  o  d  e</p> 

Output:

s c a n f c o d e

HTML paragraph

Leave a Reply

Your email address will not be published. Required fields are marked *