如何在100％宽度的div上包装文本？

Question

我有一个3 div，其display属性设置为table-cell。 Div 1是固定宽度（22px）。 Div 2需要占用剩余的可用空间。 Div 3需要固定在右侧，并且只占用其中的文本。

所以我遇到的问题是当Div 2的内容太大时，它会将Div 3推离屏幕。

这是一个移动网络应用程序。理想情况下，如果要推送屏幕的粗体，Div 2中的文本将会被剪切。我可以用javascript做，但不要认为我应该这样做。

以下是列表项的模板代码：

<div class="liContainer">
    <div class="cell a"><img src="badge.png" width="20px"/></div>
    <div class="cell b">{title}</div>
   <div class="cell c"><b>{total}</b></div>
</div>

这是css：

.cell{
    display: table-cell;
    vertical-align: middle;
}

.a{
    width: 22px;
    padding-right: 15px;
}

.b{
    width: 100%;
}

.c{
    text-align: right;
}

.liContainer{
    width: 100%;
    display: table-row;
}

编辑：采用Jithesh技术的结果如下所述

Answer 1

你可以使用花车来完成它并且它非常完美。

• 将浮动（左或右）赋予具有固定宽度或宽度的元素。
• overflow: hidden到应该占用剩余宽度的元素。

重要提示：单元格必须按顺序a> c> b因为浮动单元格必须在占用剩余空间的div之前。

这是html：

<div class="liContainer">
    <div class="a cell"><img src="https://www.google.co.in/images/srpr/logo4w.png" width="20px"/></div>
    <div class="c cell"><b>197</b></div>
    <div class="b cell">Hey, This is the long long long title</div>
</div>

和CSS

.cell{
    padding: 20px 10px;
}

.a{
    width: 22px;
    padding-right: 15px;
    float: left;
    background: #ccc;
}

.b{
    overflow: hidden;
    background: #eee;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c{
    float: right;
    background: #ccc;
}

.liContainer{
    width: 100%;
    //display: table-row;
}

更多改进

将text-overflow: ellipsis和white-space: nowrap;添加到块“c”，以使用“...”剪辑溢出的文本，该文字看起来比正常裁剪更酷。

请在此处查看：http://jsfiddle.net/Y3JEr/

Answer 2

可以做的是，如果b.太大，它会将文本包装到第二个“行”（如果需要，整个部分的高度将加倍）。为此，您必须为width: 100%容器设置除.b之外的其他内容。

为什么不将width的{​​{1}}设置为10％，将.a设置为80％，将.b设置为10％？如果您不定义高度，.c的内容将跳转到第二行。

---

或者，如果您需要将右侧div固定到屏幕的右侧，请为此设置绝对位置

.b

但要小心，.c { position: absolute; right: 0px; } 应该有

.liContainer

否则，position: relative; 的绝对定位将无效。

这可能无法解决整个问题，我猜你仍然需要使.c div小于100％。