Grow your CSS skills. Land your dream job.

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 3:43 pm

    Do you have a screenshot of Ill/Pho file?

    # July 12, 2013 at 3:44 pm

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

    # July 12, 2013 at 3:48 pm

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

    # July 12, 2013 at 4:02 pm

    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]+)’;

    # 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 4:23 pm

    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/)?

    # July 12, 2013 at 6:01 pm

    Either use FitText.js or use the following CSS:

    Add the following CSS to a class of your choice:



    .truncated {
    display:inline-block;
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    }

    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).

    Enjoy!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".