CrazyEngineers Archive
Old, but evergreen and popular discussions on CrazyEngineers, presented to you in read-only mode.
@Ankita Katdare • 29 May, 2014
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?
@Manish Goyal • 29 May, 2014 • 2 likes 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 • 29 May, 2014 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 • 29 May, 2014 yes correct
5.1k views

Related Posts

@imgopi · Sep 4, 2011

Hi am fresher doing btech(cse) i want to join in infosys plz help me to get success in interview.
6k views

@Ankita Katdare · Nov 6, 2013

Mahindra & Mahindra has launched the Mahindra W4 - XUV500 model today as the entry-level variant of its popular car XUV500. With a price tag of Rs. 10.95 lakh (ex-showroom,...
4.1k views

@Aman khan · Jul 23, 2015

My Internship in BSNL was memorable. My college is in the city of Allahabad and my home town is Varanasi they both are in Uttarpradesh. As the time goes day...
4.4k views

@jaspal rautela · Jul 4, 2012

what is consumable and non-consumable electrode?? and where it is used??
28.8k views

@Ankita Katdare · Jul 17, 2015

A friend asked me to start a discussion about this topic. Anyone here knows which are the top MCA colleges in India where the placement rate is high? I have...
7.4k views