HTML justify text-align with <pre> tag

Question

I have a problem with the text-align "justify" inside a paragraph with format and fixed width, because I want the paragraph text in HTML to appear totally justified (like it would happen with a MS Word file). However, this does not happen. What I need to modify to achieve it?

     <pre style="color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: medium; width: 500px; text-align: justify;"> 

I have a problem with the text-align "justify" inside a paragraph with format and fixed width, because I want the paragraph text in HTML to appear totally justified (like it would happen with a MS Word file). However, this does not happen. What I need to modify to achieve it?

        </pre>

EDIT: if I replace the <pre> tag with <p> tag, my code works properly. Can somebody explain me why? Perhaps I am using a wrong use of <pre> tag.

Answer 1

To justify text in <pre> you need to add white-space: normal; in your styles, but in my opinion this misses the point using the <pre> tag.

-- Edit --

Instead of <pre> tag you can just use <div> with appropriate styles. It can imitate <pre> tag very well and is easier to play with.

Answer 2

  pre {
    text-align: left;
    white-space: pre-line;
  }

Answer 3

Use tags:

<pre><code>
Your text
Your text
</code></pre>

Remove all spaces preceding your text, all indentation.