CODEWITHSUNDEEP
csscss-floatwidthhtml
Devin
Devin

Reputation: 2246

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

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 <span>&nbsp;&gt;&nbsp;</span> 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.

Upvotes: 16

Views: 43930

Answers (5)

paolo
paolo

Reputation: 11

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.

Upvotes: 1

jday
jday

Reputation: 81

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>

Upvotes: 8

Marcelo De Polli
Marcelo De Polli

Reputation: 29291

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

  • You have to use only display: inline-block in the <span> 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/

CSS

(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;
}

Upvotes: 15

Hidde
Hidde

Reputation: 11931

Two different kind of answers, both not great:

  1. 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.

  2. 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)

Upvotes: 1

aeternus828
aeternus828

Reputation: 67

Try styling the span with display:block EX:

<span style="display:block"> Here is a... </span>

Upvotes: 1

Related Questions