Menu
I'm having an issue with the HTML below:
<html>
<body>
<p style="font-size: large">
Some paragraph text
<span><pre style="display:inline">some span text</pre></span>
additional paragraph text that continues ...
</p>
</body>
</html>
So this is just a paragraph that contains some preformatted text in the middle. The problem that I am having is that both Opera and Chrome don't display this the way I expect. Specifically they close the paragraph tag before the span and force a new line. WTH?!
Using chromes HTML inspection options it shows that the <p> tag is being closed and an empty <span></span> inserted instead of enclosing the <pre>. If the span is removed chrome still closes the <p> tag, forcing a newline.
I need to have the following tag structure display without any newlines being forced <p><span><pre><code></code></pre></span></p>. Is this at all possible or is there another option or workaround?
EDIT:
I'm locked into having the <pre> tag as it is part of a syntax highlighting plugin for wordpress.
NOTE: I think the best piece of advice here is to validate your HTML. A lot of the problems I was having was because of invalid HTML that was being handled gracefully by some browsers and not gracefully by others. Validating means you have a clean slate to work from.
584
None, both the starting and ending tag are mandatory. Any element that accepts flow content.
HTML <pre> tag defines preformatted text. It is used to display code blocks since it preserves spaces and line breaks. If the line is large, then the <pre> tag won't wrap it by default. To wrap it, we need to use CSS.
The <p> tag defines a paragraph. Browsers automatically add some space (margin) before and after each <p> element while, the <pre> tag defines pre-formatted text. Text in a <pre> element is displayed in a font (usually Courier), and it preserves both spaces and line breaks.
The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
Get rid of the pre tag altogether, and just give your span style="white-space:pre". See this page for a description of other white-space options.
<pre> is basically saying <div style="white-space:pre">; what you want is <span style="white-space:pre">.
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
