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

你可以考虑给span元素加上省略号:

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

fiddle :http://jsfiddle.net/WBZng/3/