During the development process I often find useful to get more control over the single parts of the textual content of an element. Since CSS doesn't provide such a mechanism (at least until we don't make clear what a "word" is), I developed the Chunkify plugin that makes this job for us. Basically, this plugin splits the text of an element into chunks and return this text in an HTML format. Its syntax is:
$(element).chunkify(options);
Options
- separator
- A regular expression that tells the browser how the text must be split. Defaults to
/\s/(space). - wrapper
- An HTML element that wraps up every chunk. Defaults to
span. - klass
- A CSS class to be added to the HTML elements in order to stylize the chunks. This class has an incremental trailing number, so if your text has been split into three parts, you'll get
class1,class2,class3. Defaults tochunk.
It's a good plugin, no doubt. However oftenly when we want to use this kind of feature is to render our two words without space but with two different colors to avoid confusion. I agree, as your mentionned it, we need to definite what a "word" is, without space in this case. A trick could be: can we control space (/s/)?
Thanks. The point is really confusing, especially among implementors. On www-style there are often discussion on what a word is or if we should define an nth-line() selectors. The latter would be the ideal subject for a new plugin, though some tweaks are required to deal with IE and its way of handling line breaks.