Know of a way to force the first word to be orphaned, instead of last?
# July 12, 2013 at 3:39 pm
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!# July 12, 2013 at 4:12 pm
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.# July 12, 2013 at 6:01 pm
This reply has been reported for inappropriate content.
Either use FitText.js or use the following CSS:
Add the following CSS to a class of your choice:
text-overflow is a CSS3 declaration, but is supported in IE 6+, WebKit 312.3+ (Safari 1.3+/Chrome), and Opera 9+ (versions < 10.7 need the -o-text-overflow declaration).
You must be logged in to reply to this topic.