HTML justify text-align with <pre> tag

Asked 19/1, 2012 at 1:2 Answered 4/8, 2017 at 18:40

Solved html fixed-width pre text-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 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.

Audacious answered 19/1, 2012 at 1:2 Comment(0)

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.

Everson answered 19/1, 2012 at 1:11 Comment(5)

Thank you for your answer. I have tried it but it does not work. – Audacious 19/1, 2012 at 12:47

Why do you need to use the <pre> element? – Geosyncline 19/1, 2012 at 13:28

^ Good point, @jfpeji you can use <div> with appropriate styles. It can imitate <pre> very well. – Everson 19/1, 2012 at 15:41

@MrLister: Thank you for your comment. I realize that I really need the <p> tag instead of the <pre> tag (I thought this latter is used for formatted text). – Audacious 19/1, 2012 at 16:50

@Kobra: Thank you for your comment. It does works. If you edit your answer to include the <div> solution, I would be pleased to accept it – Audacious 19/1, 2012 at 19:6

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

Delainedelainey answered 13/3, 2015 at 14:52 Comment(3)

Thanks for the answer Devalli - could you offer some explanation about why this works as well as just the code? Thanks. – Monumentalize 13/3, 2015 at 14:58

w3schools.com/cssref/pr_text_white-space.asp "Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks" – Delainedelainey 13/3, 2015 at 15:13

seems like all I needed was text-align: left, thanks! – Spanner 19/8, 2022 at 22:56

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.

Everson answered 19/1, 2012 at 1:11 Comment(5)

Thank you for your answer. I have tried it but it does not work. – Audacious 19/1, 2012 at 12:47

Why do you need to use the <pre> element? – Geosyncline 19/1, 2012 at 13:28

^ Good point, @jfpeji you can use <div> with appropriate styles. It can imitate <pre> very well. – Everson 19/1, 2012 at 15:41

@MrLister: Thank you for your comment. I realize that I really need the <p> tag instead of the <pre> tag (I thought this latter is used for formatted text). – Audacious 19/1, 2012 at 16:50

@Kobra: Thank you for your comment. It does works. If you edit your answer to include the <div> solution, I would be pleased to accept it – Audacious 19/1, 2012 at 19:6

Use tags:

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

Remove all spaces preceding your text, all indentation.

Tropic answered 4/8, 2017 at 18:40 Comment(0)

Recommended topics

Hot tags