How do I style a range of text that goes beyond the borders of other elements?
Suppose I have the following paragraphs:
<p>one two </p> <p> three </p><p> four five </p>
Now, let's assume that I want to style words two, three, and four green, in place, without any other impact on the document structure or other layout. I basically want <span>
one that is superior to block level elements like <p>
s. What is the easiest way to do this? I could
<p>o <span>t</span></p><p><span>t</span></p><p><span>f</span> f</p>
But it makes things really messy due to the fact that I am using a markup parser and have my own preprocessing code. What could I have done so that there is only one "style start" and only one "style end" character per continuous length of green text?
You can have your text wrapped in one <p> </p>
and have <span>
inside that wraps the text you want to style, so:
<p>one <span>two three four</span> five</p>
http://jsfiddle.net/asbd9rdj/
change
To specify specific words in multiple tags <p></p>
, use <span></span>
as an inline element so you can attach styles to it.
<p>one <span>two</span></p>
<p>three <span>four</span></p>
An example is here: http://jsfiddle.net/79be8L6L/
The "shuffling" of HTML tags is incorrect . You have to use 3 separate tags <span>
as in your second example.
Creating a handler for your HTML generator is unfortunately the required complexity to create proper HTML.