CSS - 带有输入和标签DOM元素的自动换行

Question

链接到jsfiddle：http://jsfiddle.net/WBZng/1/

我的HTML结构如下所示：

<div>
    <input/>
    <span>Label comes here...</span>
</div>

input和span都应该有display:inline。此外，span还有word-wrap:break-word，因此没有空格的长文本仍会被包裹。但是，如果文字很长，则<span>会以新行显示，而不是保留display:inline-block。如果<span>中有空格，则不会出现此问题。

Answer 1

您可以考虑将ellipsis提供给span元素：

.panel span {
    width: 20px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
​

小提琴：http://jsfiddle.net/WBZng/3/