How to make breadcrumbs responsive using CSS?

As you can see on CrazyEngineers, the breadcrumbs (or Navigation tabs) follow the responsive design. It means they adjust to the size of the screen. I want to know how it is implemented using CSS.

Here are two screenshots to explain what I am trying to say (if it's not clear from the text) -

In full width -

Screen Shot 2014-05-29 at 8.56.17 PM

On a small screen -

Screen Shot 2014-05-29 at 8.56.10 PM

I think the trick here is to use the CSS property -

text-overflow: ellipsis
But there's more to it, because this alone doesn't work.

Could someone tell me what is at work here?

Replies

  • Manish Goyal
    Manish Goyal
    no it is .breadcrumb class

    max-width:100% through which even screen size is reduced the the width of breadcrumb section will always remain consistent

    height:24px; is the one that contributes to look of breadcrumb section, see attached screenshot, how it will look when this will be removed



    screenshot
  • Ankita Katdare
    Ankita Katdare
    Hey! Thanks a lot. That does work. 😀

    So, it seems that the text-overflow property is used for adding the trailing dots only. 😛 In technical terms - "Render an ellipsis ("...") to represent clipped text"

    I hope this information helps others with similar issues.
  • Manish Goyal
    Manish Goyal
    yes correct

You are reading an archived discussion.

Related Posts

Just came across this Coca-Cola's advertisement. I really love this idea.
BMW, the German automobile giant, has launched its brand new 2014 BMW X5 in India today. Priced at Rs 70.9 lakhs (all-India ex-Showroom), the 3rd generation BMW X5 brings several...
Main purpose of this thread is to collect the tags that are not at moment on https://www.crazyengineers.com/tags/ So please suggest the Tags that is going to be useful for CE....
I will be working as a project associate in IISc from June, 2014. I need to stay near IISc. I want a low priced PG to stay. Initally my stay...
We have talked about teleportation for ages through print media and on big screens. The phenomenon of disappearing from one location and appearing at the other without traveling the physical...