Question

我想用div来达到一行布局，其中一个div应缩短为overflow：hidden。所有元素都是浮动的。我希望.title的部分在到达float-right 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

使用％width：

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

但你的风格现在让你的头衔成为一个单一的。

CSS溢出隐藏浮动div并且没有宽度

1 个答案: