Question

检查出来

dom结构就是这个

<div class="outer">
    <div class="left">aaa</div>
    <div class="middle">middlemiddlemiddlemiddlemiddlemiddle</div>
    <div class="right">bbb</div>
</div>

外部是固定宽度，
左右分别位于左侧和右侧
所有三个部分都包含可变宽度内容。

中间部分不应溢出或将右侧部分推出容器。

理想情况下，如果发生溢出，中间会有椭圆。

我无法看到如果在没有最大宽度的长中间部分的情况下如何避免将右侧部分推出，但是这会杀死右侧部分的可变宽度。

如何解决此问题？

Answer 1

你能使用flexbox吗？

它具有您需要的属性。将增长属性设置为0＆amp;收缩属性为1，也许？

-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;

也许你可以玩它，here。

Answer 2

不完整但可以帮助您入手

HTML

<div class="outer">
    <div class="left">aaa</div>
    <div class="inner">
        <div class="right">bbb</div>
        <div class="middle">middlemiddlemiddlemiddlemiddlemiddle</div>
    </div>
</div>

CSS

.outer {
    background-color: yellow;
    height: 20px;
    width: 200px;
}

.left {
    float: left;
    display: inline-block;
}
.inner {
    float: right;
}
.middle {
    float:left;
    display: inline-block; 
    text-overflow: ellipsis;
}

.right {
    float: right;
    display: inline-block;
}

Answer 3

好的，我找到了一个纯粹的CSS解决方案。

http://jsfiddle.net/38Hmp/2/

<div class="outer">
    <div class="left">aaa</div>    
    <div class="right">bbb</div>    
    <div class="middle">middlemiddlemiddlemiddlemiddlemiddle</div>
</div>

左右浮动（左和右），中间没有浮动。

它的关键是左右在中间之前进入dom。

CSS

.outer {
    background-color: yellow;
    height: 20px;
    width: 200px;
}

.left {
    float: left;
    margin-right: 10px;
}

.middle {
     overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.right {
    float: right;
    margin-left: 10px;
}

棘手的css：连续3个部分，所有3个都可以是可变宽度

3 个答案: