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