动态宽度 div 和省略号文本答案

【问题标题】：Dynamic width div and ellipsis text动态宽度 div 和省略号文本
【发布时间】：2013-08-05 15:16:12
【问题描述】：

我试图放置 4 个 div 并排浮动，其中前两个必须放在左侧，第四个应该放在右侧，第三个必须占据两者之间的剩余宽度双方。因此，div #1、#2 和 #4 具有预定义的宽度，但 #3 是动态的。此外，这个动态宽度 div 有两个文本行（两个跨度），我希望它们在页面大小调整阻止完整阅读其文本时支持省略号。现在，在给定点，当没有足够的空间（由于 span 的文本宽度）时，div #4 会向下移动。这可以实现吗？如果可以，不需要 Javascript？我正在寻找 IE9 最低支持。

这是我想出的： http://jsfiddle.net/NMrks/aySyu/1/

HTML

<div class="container">
    <div class="blockA">A</div>
    <div class="blockB">B</div>
    <div class="blockC">
        <div class="blockC_container">
            <span class="lineA">Text text text from line A</span>
            <span class="lineB">Text text text text text from line B</span>
        </div>
    </div>
    <div class="blockD">
            <span>D</span>
    </div>
    <div style="clear:both"></div>
</div>

CSS

.container {
height: 60px;
padding-top: 5px;
padding-bottom: 5px;
min-width: 340px;
}

.container .blockA {
width: 54px;
height: 100%;
float: left;
display: block;
background-color: #ff00ff;
}

.container .blockB {
width: 50px;
height: 100%;
float: left;
display: block;
background: #df8505;
}

.container .blockC {
height: 100%;
float: left;
display: block;
background: #ff7d7b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.container .blockC .lineA {
line-height: 2.0em;
display: block;
font-weight: bold;
}

.container .blockC .lineB {
line-height: 1.0em;
display: block;
}

.container .blockD {
width: 64px;
height: 100%;
float: right;
display: block;
background: #df8505;
}

我尝试使用 100% 的宽度，根据周围的其他 div 宽度、flexbox 等设置边距，但我想不出解决这个问题的方法。

提前致谢

【问题讨论】：

标签： css html dynamic width

【解决方案1】：

小修正 blockA, blockC, blockD 应该有width:auto，否则它们的内容会溢出到外面。

长 AAA、BBB 和 CCC 细胞的更新样本：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.container {
    height: 60px;
    padding-top: 5px;
    padding-bottom: 5px;
    min-width: 340px;
}

.container .blockA {
    width: auto;
    height: 100%;
    float: left;
    display: block;
    background-color: #ff00ff;
}

.container .blockB {
    width: auto;
    height: 100%;
    float: left;
    display: block;
    background: #df8505;
}

.container .blockC {
    height: 100%;
    display: block;
    background: #ff7d7b;
}

.container .blockC_container p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lineA, .lineB {margin: 0;}

.container .blockC .lineA {
    line-height: 2.0em;
    font-weight: bold;
}

.container .blockC .lineB {
    line-height: 1.0em;
}

.container .blockD {
    width: auto;
    height: 100%;
    float: right;
    display: block;
    background: #df8505;
}

</style>
</head>
<body>

<div class="container">
    <div class="blockA">AAAAAAAAAAAAAAAAA</div>
    <div class="blockB">BBBBBBBBBBBBBBBBBB</div>

    <div class="blockD">
            <span>DDDDDDDDDDDD</span>
    </div>

    <div class="blockC">
        <div class="blockC_container">
            <p class="lineA">Text text text from line A</p>
            <p class="lineB">Text text text text text from line B Text text text text text from line BText text text text text from line BText text text text text from line B</p>
        </div>
    </div>

    <div stye="clear:both"></div>
</div>

</body>
</html>

http://jsfiddle.net/v5Dns/3/

【讨论】：

【解决方案2】：

这样的东西怎么样，它解决了这两个问题：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.container {
    height: 60px;
    padding-top: 5px;
    padding-bottom: 5px;
    min-width: 340px;
}

.container .blockA {
    width: 54px;
    height: 100%;
    float: left;
    display: block;
    background-color: #ff00ff;
}

.container .blockB {
    width: 50px;
    height: 100%;
    float: left;
    display: block;
    background: #df8505;
}

.container .blockC {
    height: 100%;
    display: block;
    background: #ff7d7b;
}

.container .blockC_container p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lineA, .lineB {margin: 0;}

.container .blockC .lineA {
    line-height: 2.0em;
    font-weight: bold;
}

.container .blockC .lineB {
    line-height: 1.0em;
}

.container .blockD {
    width: 64px;
    height: 100%;
    float: right;
    display: block;
    background: #df8505;
}

</style>
</head>
<body>

<div class="container">
    <div class="blockA">A</div>
    <div class="blockB">B</div>

    <div class="blockD">
            <span>D</span>
    </div>

    <div class="blockC">
        <div class="blockC_container">
            <p class="lineA">Text text text from line A</p>
            <p class="lineB">Text text text text text from line B Text text text text text from line BText text text text text from line BText text text text text from line B</p>
        </div>
    </div>

    <div stye="clear:both"></div>
</div>

</body>
</html>

还有其他方法可以让第三列占据所有空间，但将它放在 HTML 中的另一列之后并移除它的浮动是最简单的。

【讨论】：

是的，这就是我要找的。非常感谢。