Ocultando SPAN Overflow

Question

Estoy tratando de crear un widget de estilo combobox (compatible con jquery-ui) y actualmente estoy tratando de ordenar el diseño estático de la caja. El problema es que cuando tengo texto largo en el área de valor de la selección, no se recorta en Firefox (en realidad se ajusta). No quiero esto e intenté varias combinaciones de desbordamiento: espacio en blanco oculto: nowrap etc., pero en Firefox todavía se envuelve. El código de muestra está debajo.

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

¿Alguien puede ayudar con esto?

Answer 1

Intente dar al elemento un display:block, o cambie el SPAN a un elemento de nivel de bloque como DIV.

Answer 2

El problema es que los tramos son elementos en línea, y no se puede establecer el ancho o el alto en los elementos en línea.

Y como los controles de desbordamiento se basan en las dimensiones del bloque, no funcionará.

Sin embargo, a partir de Firefox 3.0, no hay soporte para

display: inline-block 

que le permite controlar el elemento como si eran un bloque, pero con el alcance que contiene todavía se comporta como un elemento en línea .

Answer 3

comprobar la propiedad de desbordamiento de CSS-wrap:

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap