Geek Answers Handbook

CSS - Make a SPAN to the end of its container / fill in the empty space?

I have the following HTML layout for a website (based on Network Solutions nsCommerceSpace). I am developing 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>

Span tags with <span>&nbsp;&gt;&nbsp;</span> in them are automatically generated to separate each element.

Here is the scenario of my problem: http://jsfiddle.net/5fvmJ/

Is there a way for the last SPAN tag to fill in the empty space and just finish when it hit the right side? I would just use overflow: hidden; to hide additional text.

Any ideas? I know that all SPAN makes it tough, but the built-in functions of the site that I can’t change.

+4
source share
5 answers

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

  • You should only use display: inline-block in <span> tags without float: left , since float actually contradicts inline-block elements.
  • You should use white-space: nowrap in the parent <div> .

This way you do not need to specify a width for anything. :)

Jsfiddle demo

http://jsfiddle.net/yz9TK/

CSS

(I cleaned it a 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; }
+8
source

This span class helped ...

 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>
+7
source

Two different answers, both not great:

+1
source

Try span style with display:block EX:

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

+1
source

You do not need to specify a width. Just add 'display: block; don't swim: no; "to the css class. Optionally add 'overflow: hidden' if you don't like text starting with a new line.

+1
source

More articles:


All Articles