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

时间:2012-08-30 14:39:44

标签: css word-wrap

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

我的HTML结构如下所示:

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

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

1 个答案:

答案 0 :(得分:1)

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

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

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