Print first word of element double

Question

How can I achieve something very known from print: Get the first word of an element (p, h1, h2 or something), duplicate it and style it differently (in my case, give it a bit of offset and another color, so both words overlap)? Is there a CSS-only way of doing this or something possibly working with jQuery or alike?

Since it is CMS driven, there is no way to manually insert the world with a span or alike, it would also affect SEO of course...

Thanks in advance!

first word or first letter? because you could do a `::first-letter` with css. — Abhitalks, Jun 05 '14 at 14:19
***both words overlap*** looks like you can just wrap the first word in some element and style it with `text-shadow`. — King King, Jun 05 '14 at 14:19
CSS only supports first letter and first line. First word will either need JS (very cumbersome), or if you're using something like WordPress, hook into the content and use regex to extract the first word and wrap it in span tags. — PeteAUK, Jun 05 '14 at 14:21
you could use this: http://stackoverflow.com/questions/5458605/first-word-selector — Abhitalks, Jun 05 '14 at 14:24
Actually, the text-shadow idea was so simple, but didn't come to my mind, so it works if the element is a separate one. It partly does the trick, thanks a bunch. — physalis, Jul 02 '14 at 20:24

score 1 · Accepted Answer · answered Jun 05 '14 at 15:28

Here's a pure javascript solution. It does add a span, but this would effect SEO less than duplicating a word (which could be flagged as black hat practice, since you're duplicating content which could be read by a screenreader)

JSfiddle

HTML:

<p id="paragraph">This is a sentence</p>

Javascript:

// grabs the #paragraph element
var string = document.getElementById('paragraph');

//grabs the content of the #paragraph element
var stringContent = string.innerHTML;

//pushes the string content into an array
var stringArray = stringContent.split(" ");

//wraps the first word in a span
stringArray[0] = '<span class="first-word">' + stringArray[0] + '</span>';

//pushes the array back into stringContent
stringContent = stringArray.join(' ');

//pushes stringContent back into your html
string.innerHTML = stringContent;

Print first word of element double

1 Answers1