Скрытие переполнения SPAN

Я пытаюсь создать виджет стиля combobox (jquery-ui compatible) и в настоящее время я пытаюсь получить статическую раскладку сортированной коробки. Проблема в том, что когда у меня есть длинный текст в области значений, который он не клип в Firefox (он фактически обертывается). Я не хочу этого и пробовал различные комбинации переполнения: скрытое белое пространство: nowrap и т.д., Но в Firefox он все еще обертывается. Пример кода ниже.

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

Может ли кто-нибудь помочь в этом?

Ответ 1

Попробуйте дать элемент a display:block или измените SPAN на элемент уровня блока, например DIV.

Ответ 2

Проблема состоит в том, что строки являются встроенными элементами, и вы не можете установить ширину или высоту встроенных элементов.

И поскольку элементы управления переполнением основаны на размерах блока, это не сработает.

Однако с Firefox 3.0 существует поддержка

  display: inline-block

Это позволяет вам управлять элементом, как если бы он был блоком, но с областью содержимого, которая все еще ведет себя как встроенный элемент.