CSS 隐藏 SPAN 溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/460796/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hiding SPAN Overflow
提问by James Hughes
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.
我正在尝试创建一个组合框样式小部件（jquery-ui 兼容），目前我正在尝试对框的静态布局进行排序。问题是当我在选择的值区域中有长文本时，它不会在 Firefox 中剪辑（它实际上是换行）。我不想要这个并尝试了各种组合 overflow:hidden white-space: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>
Can anyone offer any help on this?
任何人都可以提供任何帮助吗？
回答by Aron Rotteveel
Try giving the element a display:block, or change the SPANto a block-level element like DIV.
尝试给元素 a display:block，或将 更改SPAN为块级元素，如DIV。
回答by Kent Fredric
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
但是，从 Firefox 3.0 开始，支持
display: inline-block
Which allows you to control the element as if it werea block, but to the containing scope it still behaves like an inline element.
它允许你控制元素，就好像它是一个块，而是包含范围内仍表现得像一个内联元素。
