Hiding SPAN Overflow

Question

Hello,

I am trying to create a combobox style widget (jquery-ui compatible) andcurrently I am trying to get the static layout of the box sorted. The problem is when I have long text in the value area of the select it doesn't clip in Firefox (it actually wraps). I don't want this and tried various combinations overflow:hidden white-space:nowrap etc but in Firefox it still wraps. The sample code is below.

<a href="#" class="ui-widget ui-widget-content ui-custom-button ui-state-default ui-corner-all ui-helper-reset" style="padding-left:5px;text-decoration: none; width: 139px; ">
    <span style="float:right;margin-top:1px;border-left:1px solid #D3D3D3;" class="ui-custom-button-icon ui-icon ui-icon-triangle-1-s" ></span>
    <span style="line-height:1.5em;font-size:10px;margin-top:1px;overflow:hidden;height:16px;">If the text is very long then somethin</span>
</a>

Can anyone offer any help on this?

James

Answer 1

The problem is spans are inline elements, and you can't set width or height on inline elements.

And as overflow controls are based on block dimensions It won't work.

However, as of Firefox 3.0, there is support for

  display: inline-block

Which allows you to control the element as if it were a block, but to the containing scope it still behaves like an inline element.

Answer 2

Try giving the element a display:block, or change the SPAN to a block-level element like DIV.