Creating a zero-width wrap point for all browsers

I'm writing a JS snippet to create a series of tabs to allow a viewer to cycle through various parts of a web page instead of scrolling down to see them. The tabs are all <a> elements, encased in a <span> element each for prettifying purposes. The spans are all chucked in a <div>. No floating. The number of tabs shown depends on the page which is modified by the script, and can go up to around twenty or possibly more. In cases where there are many tabs the div needs to wrap. I accomplished this in FF by inserting a zero-width space between each span, which works quite nicely. However, webkit doesn't like this, and refuses to line-break. For aesthetic purposes the tabs really need to be scrunched up next to each other, and yet I am at a loss as to how to accomplish this in a way which works with Safari and Chrome. Any assistance would be greatly appreciated.

My code can be seen here.

Answers


On my website I've solved this by having the container div to have

div#container { 
  overflow: auto; 
}

and in the spans inside the div

div#container span 
{ 
  float: left; 
  display: block; 
}

Need Your Help

How can I style and animate a checkbox with jquery?

jquery

I have an html checkbox input on my frontend interface.

React 15 not compatible with React-redux

javascript node.js reactjs npm redux

I am trying to upgrade to the freshly released react@15.0.0-rc.1 on my project that is also using react-redux@^4.4.0 package.