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?
source to share
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>
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/
source to share
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.
source to share