Here's a bit of JavaScript and jQuery I threw together to wrap the first word of each paragraph with a <span>
tag.
$(function() {
$('#content p').each(function() {
var text = this.innerHTML;
var firstSpaceIndex = text.indexOf(" ");
if (firstSpaceIndex > 0) {
var substrBefore = text.substring(0,firstSpaceIndex);
var substrAfter = text.substring(firstSpaceIndex, text.length)
var newText = '<span class="firstWord">' + substrBefore + '</span>' + substrAfter;
this.innerHTML = newText;
} else {
this.innerHTML = '<span class="firstWord">' + text + '</span>';
}
});
});
You can then use CSS to create a style for .firstWord
.
It's not perfect, as it doesn't account for every type of whitespace; however, I'm sure it could accomplish what you're after with a few tweaks.
Keep in mind that this code will only execute after page load, so it may take a split second to see the effect.