I'll try to explain as best I can, I wasn't able to find anything relevant on this on my searches so I'm guessing it isn't a commonly needed requirement... here goes:

For the design of a website I've made all H1's (and a class for any others that require this look) and sub navs have a background colour of black.

This is fine, the 'problem' comes when a line of text is longer than the space it is contained within (this bit also fine), when the line wraps, the last letter/word of the first line and first letter/word of the second line don't respect the padding applied to it's tag (h1, li, a etc.)

I have a css solution but I am unable to use it due to it's infeasibility, so I am looking for a js solution.

Here is an example of what I'm looking to achieve:

But I need to somehow detect with js the last letter of the first line and the first of the last and then use that to apply a class to each of the offending letters.

Thanks for looking all help is appreciated.

I must ad also I am quite new to js (but it is a personal mission to learn) and I promise to try to understand any code provided and not just copy/pasta.

Thanks again.