Grow your CSS skills. Land your dream job.

Automatically resize text when overflown from div.

  • # 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.[http://codepen.io/Jarolin/pen/bsJxi](http://codepen.io/Jarolin/pen/bsJxi “”)

    # February 19, 2013 at 11:17 am

    WOW…Ok.

    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. :http://codepen.io/Paulie-D/pen/mHtGr

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

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