Menu
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?
844
You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <span> element is not visible, but it maintains its position on the page. Removing the hidden attribute makes it re-appear.
hidden - The overflow is clipped, and the rest of the content will be invisible. scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content. auto - Similar to scroll , but it adds scrollbars only when necessary.
You can use the CSS property word-wrap:break-word; , which will break words if they are too long for your span width.
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
Try giving the element a display:block, or change the SPAN to a block-level element like DIV.
61
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
