Css 使用长方体模型在其父div中包含项

使用以下HTML和CSS3规则，我试图确保遵守以下标准：

我的所有标准都有效，但第1项除外 孩子们超过了父母的宽度。问题：如何让孩子留在父母身边

li项不能超过其父项宽度，即400px

img、标签和货币内容必须在其范围内垂直居中

货币不应换行，且应始终以完整形式显示

货币应始终显示在尽可能靠近货币的位置 标签跨度

标签文本应夹在两行上，超过两行时显示省略号

注意：只需要在基于Chrome和SafariWebKit的浏览器中工作

它应该是这样的：

然而，目前看起来是这样的：

有什么想法吗

*********************************************

<ul>
    <li>
        <span class="img"></span>
        <span class="label">Acclaim</span>
        <span class="currency">(USD 50)</span>
    </li>

    <li>
        <span class="img"></span>
        <span class="label">Acclaim 1 11 111 1111 11111</span>
        <span class="currency">(USD 50)</span>
    </li>

    <li>
        <span class="img"></span>
        <span class="label">Acclaim 1 11 111 1111 11111 2 22222 2222 22222 3 33 333 3333 33333 4 44 444 4444 44444 5 55 555 5555 55555 6 66 666 6666 66666</span>
        <span class="currency">(USD 50)</span>
   </li>
</ul>


ul {
    width: 400px;

    background-color: yellow;
    padding: 0;
    margin: 0;
}

li {
    display: -webkit-box;

    padding-right: 50px;
}

.label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;

    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3em;
    margin-right: 0.2em;    

    background-color: pink;    
}

.currency {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;

    white-space: nowrap;

    background-color: lightgreen;    
}

.img {
    display: block;
    width: 40px;
    height: 40px;
    margin-right: 0.1em;

    background-image:url('data:image/png;base64,iVBOR...);
}

宣称
（50美元）


喝彩11111111111
（50美元）


喝彩11111111111111222222222222222233333333333343444444444555555555555555556666666666666
（50美元）


保险商实验室{
宽度：400px；
背景颜色：黄色；
填充：0；
保证金：0；
}
李{
显示：-网络工具包盒；
右边填充：50px；
}
.标签{
显示：-网络工具包盒；
-网络工具包盒方向：垂直；
-webkit盒包：中心；
-webkit线夹：2个；
文本溢出：省略号；
溢出：隐藏；
空白：正常；
单词包装：打断单词；
线高：1.3em；
右边距：0.2米；
背景颜色：粉红色；
}
.货币{
显示：-网络工具包盒；
-网络工具包盒方向：垂直；
-webkit盒包：中心；
空白：nowrap；
背景颜色：浅绿色；
}
.img{
显示：块；
宽度：40px；
高度：40px；
右边距：0.1米；
背景图像：url（'data:image/png；base64，iVBOR…）；
}

如果价格不进一步上涨，以下措施将起作用：

我只是将边距右转为像素，以便知道内容（而非标签）占用的空间，然后为其余部分添加最大宽度：

.label {   
    margin-right: 3px;  
    max-width: 294px;
}

如果价格或图像是可变宽度，则需要js读取其宽度，从400px中删除并将该值添加到最大宽度

下面是一个使用JavaScript动态设置最大宽度的示例：

我还没有检查所有尺寸，所以应该添加这些尺寸以使其完全准确，否则利润将使价格不再合适

我基本上检查了其他元素的宽度：

function getWidth(el) {   
    return parseInt(window.getComputedStyle(el,null).getPropertyValue("width"));
}

然后，我从400px中删除此宽度，并设置maxWidth：

for (var i=0; i<imgs.length; i++) {
    var width = 400 - (getWidth(imgs[i]) + getWidth(currencies[i])) + "px"; 
    labels[i].style.maxWidth = width;
}

---

用于（var i=0；i我已经解决了这个问题，在没有JavaScript的情况下可以工作。但是，它只适用于更现代的浏览器，包括Chrome和Opera。它在Safari中不起作用。一旦它更新到最新的规范，它将在Firefox中起作用。我可能可以让它在IE10中工作，但我必须进一步研究。省略号只适用于Chrome/Safari特定于供应商

演示在

首先，我们希望将li作为flexbox容器，并将其设置为400px，以便flex项目将尝试适合该大小（稍后将详细介绍）：

现在子项是flex项，使标签适合的关键是将图像和价格设置为not flex。对于价格，我们知道它希望始终为40xp宽，因此我设置了以下内容：

.img {
    width: 40px;
    height: 40px;

    -webkit-flex-basis: 40px;
    flex-basis: 40px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
 }

这表示首选id为40px，并且从不使其变小

然后，我们还要告诉价格永远不要缩水，并将匿名框（内容）置于中心：

最后，我们还希望将标签文本居中。由于您需要省略号破解，我为WebKit使用了旧的Flexbox语法。如果不使用旧的Flexbox，line clamp属性将不起作用：

.标签{

/* need to use old flexbox for line-clamp to work
   it is a *horrible hack* */
display: -webkit-box;
display: flex;

-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow : hidden;
text-overflow: ellipsis;

-webkit-box-pack: center;
align-items: center; 

}

由于其他两个项目永远不会收缩，.label元素是唯一可以收缩的元素，因此如果没有空间，它的尺寸会减小。
这里是我在flex模型上使用的另一个提琴，但仅在Chrome上使用。它仍然不适用于Safari？-不过它有点混合了flex和box模型，因为我无法获得省略号和line-clamp可用于flex模型。Flexbox尚未取代box模型。它只是布局的另一个选项。在Safari中，您将无法使用line clamp来处理box模型或flex模型，因为文本溢出：省略号不适用于多行文本，您的省略号只是Chrome上的幸运解决方案。：）你可能会在选择器后面加上：和内容：“…”来冒充文本溢出：省略号，但无论如何都不会太好。@DavidStorey删除了这句话，认为它不是真的。嗨-谢谢你的回答-我很感谢你花了这么多时间在它上面。因为价格总是可以变大或变小，你提出的纯CSS解决方案不会成功Office。我正在寻找一个使用box模型（或flex模型）的解决方案，请参阅文章标题。我真的在寻找一种单独使用CSS的方法。正如您所看到的，我最初编写的CSS几乎实现了这一点。再次感谢。嗨，dstorey，再次感谢您的努力。然而，正如原始问题中所述(“注意：只需要在基于Chrome和Safari webkit的浏览器中工作”）我需要一个在Chrome和Safari中都能工作的解决方案，因为这需要在Android和iOS设备上工作。我认为我们遇到了CSS限制。Flexbox可以做你想做的事情，但不幸的是Safari不能。它的Flexbox实现不够好。它不支持在不增加元素的情况下缩小元素。你可以添加更多的回退，使其主要在Safari中工作，但您无法正确地缩减内容。这不是CSS限制，而是Safari限制。
.currency {

    /* make anonymous box vertically centred */ 
    display: -webkit-flex;
    display: flex;

    -webkit-align-items: center;
    align-items: center;

    /* make sure it never shrinks */ 
    -webkit-flex-shrink: 0;
   flex-shrink: 0;
}

/* need to use old flexbox for line-clamp to work
   it is a *horrible hack* */
display: -webkit-box;
display: flex;

-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow : hidden;
text-overflow: ellipsis;

-webkit-box-pack: center;
align-items: center;