HTML justify text-align with <pre> tag

html fixed-width pre text-justify
julianfperez picture julianfperez · Jan 19, 2012 · Viewed 27k times · Source

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

Kobra picture Kobra · Jan 19, 2012

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.

Related questions

HTML CSS formatting: table row inherit content height

How can I format a table row to inherit the height of the content? I wish to have something like I have tried table{ table-layout:fixed; width:700px; } but that does not work

Read More
Disable changing of width in html table

I'm trying to create a "fixed-width" table, but it somehow changes the column width whenever the data in column is bigger than rest of them. For example, following table changes the width on the last number, which is 10. <table&…

Read More
Assigning CSS width to a position:fixed element

I'd like a fixed element's width to match that of the div placed immediately below it. Imagine a header and a main content div. A problem in matching their widths occurs when the header and content divs are nested inside …

Read More