The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Automatically resize text when overflown from div.

  • Anonymous
    # February 19, 2013 at 11:02 am

    I have a navigation bar, It looks perfectly but when users from other countries see the translated page each nav link becomes larger or smaller and when each word becomes larger the nav overflows and is covered. How can i make the font-size shrink or get larger depending on the available space. Here’s a pen so you can better see what i mean.[]( “”)

    # February 19, 2013 at 11:17 am


    To start with you can’t use the same ID more than once so giving it to all of your links is a big “no-no”.

    Here…I’ve tidied it up a little. :

    # February 19, 2013 at 11:22 am

    As for how it is viewed when translated…I don’t think there is much you can do about that….but I’ll have a think about inline-block and how that reacts to viewport sizes.

    # February 19, 2013 at 1:57 pm

    There must be a way of doing it. I’m sure ive seen it before. Just cant remember where.

    # February 19, 2013 at 1:59 pm

    Perhaps they were using rems…but browser support isn’t too bad at the moment. IE9+ etc.

    # February 19, 2013 at 10:48 pm

    Maybe something with jquery or javascript can work.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed