CSS

Question

I have the following HTML layout for a website (powered by Network Solutions nsCommerceSpace) I am designing a theme for:

<div id="ctl00_breadcrumb" class="breadcrumb">
   <span id="ctl00_breadcrumbContent">
      <span><a href="/">[Name of Webstore]</a></span>
      <span>&nbsp;&gt;&nbsp;</span>
      <span><a href="/page.aspx">Page</a></span>
      <span>&nbsp;&gt;&nbsp;</span>
      <span>Here is a very long title of a product that is causing me much frustration because it jumps out of place.</span>
   </span>
</div>

The span tags with  >  in them are automatically generated to separate each item.

Here is a Fiddle of my problem: http://jsfiddle.net/5fvmJ/

Is there a way I can make the last SPAN tag fill the empty space, and just end when it hits the right side? I would just use overflow: hidden; to hide the extra text.

Any ideas? I know having all SPAN's makes this tough, but it's built-in functionality of the site that I cannot change.

score 15 · Accepted Answer · edited Jun 20 '20 at 09:12

I think I found a pure CSS solution. You only missed two things:

You have to use only display: inline-block in the  tags without float: left, because floating is actually contradictory with inline-block elements.
You have to use white-space: nowrap in the parent <div>.

This way you don't need to specify a width for anything. :)

JSFiddle demo

http://jsfiddle.net/yz9TK/

(I cleaned it up a little bit)

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
    background: #212121;
    color: #FFF;
}

#ctl00_breadcrumb {
    height: 45px;
    width: 960px;
    background-color: #707070;
    line-height: 45px;
    font-size: 16px;
    font-family: Helvetica, sans-serif;
    border-radius: 10px;
    border: 1px solid #585858;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .75);
    box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .75);
    white-space: nowrap;
    overflow: hidden;
}

#ctl00_breadcrumbContent span {
    display: inline-block;
    padding: 0px 10px;
    line-height: 45px;
    font-size: 18px;
    font-family: Helvetica, sans-serif;
}

#ctl00_breadcrumbContent span a { 
    padding: 0;
    margin: 0;
    color: #FFF;
    text-decoration: none;
    line-height: 45px;
    font-size: 18px;
    font-family: Helvetica, sans-serif;
}

#ctl00_breadcrumbContent span:nth-child(even) {
    width: 0;
    height: 0;
    padding: 0;
    margin: -22px -4px -16px -4px;
    overflow: hidden;
}

#ctl00_breadcrumbContent span:nth-child(1) { 
    border-radius: 10px 0px 0px 10px;
    background-color: #404040;
}

#ctl00_breadcrumbContent span:nth-child(2) {
    border-top: 22px solid #505050;
    border-bottom: 23px solid #505050;
    border-left: 15px solid #404040;
}

#ctl00_breadcrumbContent span:nth-child(3) {
    background-color: #505050;
}

#ctl00_breadcrumbContent span:nth-child(4) { 
    border-top: 22px solid #606060;
    border-bottom: 23px solid #606060;
    border-left: 15px solid #505050;
}

#ctl00_breadcrumbContent span:nth-child(5) {
    background-color: #606060;
}

#ctl00_breadcrumbContent span:nth-child(6) { 
    border-top: 22px solid #707070;
    border-bottom: 23px solid #707070;
    border-left: 15px solid #606060;
}

#ctl00_breadcrumbContent span:nth-child(7) { 
    background-color: #707070;
}

#ctl00_breadcrumbContent span:nth-last-child(1) {
    background-color: #707070;
}

#ctl00_breadcrumbContent span:nth-last-child(2) {
    border-top: 22px solid #707070;
    border-bottom: 23px solid #707070;
}

Amazing, good sir. Exactly what I was looking for. Props to you. Thanks so much. — Devin, Aug 14 '12 at 14:36

score 8 · Answer 2 · answered Dec 20 '12 at 17:50

8

This span class did the trick for me...

span.empty_fill {
    display:block;
    overflow:hidden;
    width:100%;
    height:100%;
}

Essentially used like this...

<div class='banner'><a href='/'><span class='empty_fill' /></a></div>

answered Dec 20 '12 at 17:50

jday

81
1
1

score 1 · Answer 3 · edited May 23 '17 at 10:29

1

Two different kind of answers, both not great:

http://jsfiddle.net/5fvmJ/14/: Set a max-width for the last span, to make sure that the background doesn't jump. You should then make sure that the text doesn't fall out.
Without any width changing, get the text dimensions, and only display the substring with ... appended, which stays inside the bar: http://jsfiddle.net/5fvmJ/19/. You should do that dynamically. ( Calculate text width with JavaScript)

edited May 23 '17 at 10:29

Community

1
1

answered Aug 14 '12 at 13:19

Hidde

11,493
8
43
68

1) That could work, but the width will always be different because the 'Page' title is different depending on the category you are looking at. – Devin Aug 14 '12 at 13:29
2) Not sure if that can be done with JavaScript or jQuery? Server cannot take any server-side code... only client-side. – Devin Aug 14 '12 at 13:30
See the link in the edit at 2., and for 1: you are not setting a width, but a max-width. If the text is smaller than the width, it will just fit normally. – Hidde Aug 14 '12 at 14:02
Right, but if I have a category called "Category' the width would be larger than if it were "Very Long Category". Now the text would jump again. SO I would have to make the max-width be the max-width of that space when the category is at its largest, but then if I have a short category title, the page title would be trimmed a lot, and would have a lot of wasted free space. I hope you understand what I'm trying to explain. – Devin Aug 14 '12 at 14:05
Aah! Yes, I get it now, you want to append more items behind the long item. Again, I think the second option is best: determine the width of the text, if it is too long make it shorter and append `...`. – Hidde Aug 14 '12 at 14:07
See, I did set that up, but again I have the same issue: I don't know what the number of max characters I can have is, since it depends on the length of the previous items.... Maybe if I can calculate the total width of the previous items using jQuery and .css('width')? – Devin Aug 14 '12 at 14:09
I cannot give a lot more tips than what I have already given, you have to start experimenting a bit I think. Good luck :) – Hidde Aug 14 '12 at 14:10

score 1 · Answer 4 · answered Aug 14 '12 at 13:20

1

Try styling the span with display:block EX:

 Here is a... 

answered Aug 14 '12 at 13:20

aeternus828

67
1
9

Doesn't make any change when used in conjunction with overflow:hidden ? The purpose of display:block is to force the span to act more like a div – aeternus828 Aug 14 '12 at 13:39
This isn't a total solution, but it may work as a fix? Adding display:block allows you to set a fixed width for the span... still not sure why overflow doesn't work in your example on Fiddle – aeternus828 Aug 14 '12 at 13:55
Oh, well with a width specified it works, but that's my problem... I don't have a value I can set it to, since it always needs to be different since the titles of the pages/categories are of different lengths. – Devin Aug 14 '12 at 13:58

score 1 · Answer 5 · answered Apr 17 '13 at 10:36

1

You don't need to specify the width. Simply add 'display:block; float:none;' to the css class. Optionally add 'overflow:hidden' if you don't like the exceding text starting a new line.

answered Apr 17 '13 at 10:36

paolo

11
1

CSS - Make SPAN extend to end of its container / fill empty space?

5 Answers5

JSFiddle demo

CSS

Linked

Related