html line height issue; <br> vs CSS line-height

Question

I know there are a lot of "similar" issues here on stackoverflow, but none to answer my dilemma.
The code is like this:

------------CSS--------------
pre{
    white-space : pre-wrap;
    line-height:75%;
}

-----------HTML--------------
<pre>Some text<br>
     second line of text<br>
     third line<br>
     some longer text that will get wrapped on another line</pre>

I got the text from a database, so I cannot use li or other things...but I must keep the formatting (space indentations, line breaks, everything as it was saved in DB). The problem is that <br> line break is taller than text-wrap line break (which takes its value from css). Any way to control both of them? As I understand, <br> inherits its height value... but I don't from where it inherits that. From the current text, from a parent, from a browser-default setting?

Solution 1

Just remove the <br> tags and keep the line breaks. The pre tag will break the lines where there are line break characters in the text:

<pre>Some text
    second line of text
    third line
    some longer text that will get wrapped on another line
</pre>

Or hide the br tags using CSS:

pre br { display: none; }

Solution 2

To answer your last question: the <br> tag's height (or more accurately, line-height) is inherited from it's parent.

Here is a fiddle as an example: http://jsfiddle.net/ivandurst/7afUZ/

Additionally, you can set the <br> line-height directly, but any value 1em or less won't affect it unfortunately:

br {line-height: 1.5em}

Comments

[derei]

Thanks for your response. Indeed, <pre> did all for me. I was using $text = nl2br(htmlspecialchars($raw_text)) to format my text collected from DB. But as I can see, <pre> is doing everything and I don't need to prepare the text anymore.