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 -
On a small screen -
I think the trick here is to use the CSS property -
Could someone tell me what is at work here?
Here are two screenshots to explain what I am trying to say (if it's not clear from the text) -
In full width -
On a small screen -
I think the trick here is to use the CSS property -
text-overflow: ellipsisBut there's more to it, because this alone doesn't work.
Could someone tell me what is at work here?
Replies
-
Manish Goyalno 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
-
Ankita KatdareHey! 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 Goyalyes 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...