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 -
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?
@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
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 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.
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
Facebook
Twitter
LinkedIn
Whatsapp
@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