Question

我正在尝试创建一个组合框样式小部件（jquery-ui兼容），目前我正在尝试将盒子的静态布局排序。问题是当我在选择的值区域中有长文本时它不会在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>

有人可以提供任何帮助吗？

Answer 1

尝试为元素display:block提供，或将SPAN更改为DIV等块级元素。

Answer 2

问题是跨度是内联元素，您无法在内联元素上设置宽度或高度。

由于溢出控件基于块尺寸，因此不起作用。

但是，从Firefox 3.0开始，支持

  display: inline-block

它允许您像控制块一样控制元素，但是对于包含范围，它仍然表现得像内联元素。

隐藏SPAN溢出

2 个答案: