html - CSS溢出隐藏 float div且没有宽度

Question

我想用 div 实现单行布局，其中一个 div 应该用 overflow:hidden 缩短。所有元素都是 float 的。我希望 .title 的部分在到达右浮动 div 时被缩短。有没有不设置宽度或不使用 javascript 的解决方案？

这是我的 HTML:

<div class="container">
<div class="float-left icon"><span class=" icon ">Z</span>
</div>
<div class="float-left title ">
<p>Long text. Long text. Long text. Long text. Long text. Long text. Long text. Long text. Long text. Long text. Long text. Long text.</p>
</div>
<div class="float-right ">
<div class="right ">
    <a><span class="icon ">ICON</span></a>
</div>

这是我的 CSS:

    .container {
    width: 100%;
}
    .float-left {
        float: left;
    }
    .title p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .float-right {
        float:right;
    }

http://jsfiddle.net/eok46kba/62/

Answer 1

使用百分比宽度:

.container {
    width: 100%;
}
.icon {
    background:yellow;
}
.float-left {
    float: left;
    width:15%;
}
.title {
    width:70%;   
    background:red;
}
.title p {
    white-space: nowrap;
    overflow: hidden;
}
.float-right {
    float:right;
}

编辑:(发布错误的jsfiddle)https://jsfiddle.net/eok46kba/64/

但是您的风格 nowrap 使您的标题成为单行。