Hiding SPAN Overflow

Question

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?

I realise that - I generally use inline styles while on the fly prototying until I am satisified. It allows me a faster way to manipulate them in Firebug. But thanks for the constructive feedback :-P — James Hughes
– James Hughes, Commented Jan 20, 2009 at 10:57
Check the overflow-wrap css property: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap — ufukomer
– ufukomer, Commented Feb 7, 2018 at 14:12
The question & two answers that just keep on giving, 14 years later. Still relevant. — MickeyDickey on codidact.com
– MickeyDickey on codidact.com, Commented Aug 6, 2023 at 15:08

Aron Rotteveel · Accepted Answer · 2009-01-20 10:57:07Z

42

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

answered Jan 20, 2009 at 10:57

Aron Rotteveel

83.4k17 gold badges106 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shmeeps Over a year ago

Once again, SO solved a 30 minute problem in all of 5 seconds. +1

Kent Fredric · Accepted Answer · 2009-01-20 10:56:10Z

21

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.

answered Jan 20, 2009 at 10:56

Kent Fredric

57.6k14 gold badges112 silver badges151 bronze badges

2 Comments

Kent Fredric Over a year ago

If you're doing it on the fly in firebug, some things will behave differently in mockup because of reflow. Put it in the stylesheet w/ever and reload the page and sometimes it behaves differently.

James Hughes Over a year ago

I did throw it into stylesheets and the same result. I suspect it has to do with classes/attributes assigned further up the stylesheet. Thanks anyway

Collectives™ on Stack Overflow

Hiding SPAN Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related