I am working with a product title "Pillow BALANCE purple" and I would like to have a line break after the second word. It should look like this:
Pillow BALANCE
purple
The title has a class called "title". I am currently using the following code to change the color of the first word "Pillow", but I also need to change the color of the second word and ensure that the third word goes to a new line. Any assistance on how to accomplish this would be greatly appreciated.
//add span to first word of module title, page heading
window.addEvent ('domready', function () {
var els = $$('.art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:hover, .art-postcontent h2 a:visited, .art-blockcontent h2 a, .art-blockcontent h2 a:link, .art-blockcontent h2 a:hover, .art-blockcontent h2 a:visited');
if (!els.length) return;
els.each (function(el){
var html = el.innerHTML;
var text = el.get("text");
var pos = text.indexOf(' ');
if (pos!=-1) {
text = text.substr(0,pos);
}
el.set("html", el.get("text").replace(new RegExp (text), '<span class="first-word">'+text+'</span>'));
});
});