Know of a way to force the first word to be orphaned, instead of last?

[MichelleMcG]

Often my clients want to prevent orphaned words at the end of titles. One way is to insert a break tag, but that’s not very friendly to responsive designs where the width/size of the title varies by device.

One designer I work with regularly puts the orphaned word on the first line of the title, followed by the rest of the title text. (This is in an Illustrator/Photoshop file.) Looks pretty good, but I have no idea how to accomplish it! Seems almost like you’d need to draw the titles backwards, which I guess (!?) I could do via jQuery, but it seems like it might be a pretty intensive process to implement site-wide on a WordPress site.

Any ideas, oh CSS gurus out there?

This is an example of how one would look:

Thanks!

[Alen]

Do you have a screenshot of Ill/Pho file?

[Paulie_D]

Exactly how would this look….I’m having trouble visualizing it.

[MichelleMcG]

I edited the post with an example of what I mean.

[Alen]

Use a filter, run the title trough regular expression to get first word, then wrap it in `span` tag for example then just make it display block and clear the rest of the title. Regular expression would be something like

$reg = ‘([^s]+)’;

[MichelleMcG]

Thanks AlenAbdula, but I don’t know if every title is going to need a orphaned first word – some will fit correctly on one line.

I’m still curious if this can be done (just ’cause, hey, new thing!) but right now I’m leaning toward using something like Typogriphy go just do the normal prevent-orphans-and-widows thing.

[Alen]

Since there’s so many variations to the titles, this would be pain in the ass to implement. In addition you’ll be dealing with RWD.

Can’t you just use something [like fitText](http://fittextjs.com/)?

[Author]

Posts