Question

使用以下HTML和CSS3规则，我正在尝试确保遵守以下条件：

除了项目1之外，我的所有标准都有效孩子超过了父母的宽度。问题：如何让孩子留在父母家中？

li项目不能超过其父宽度，即400px
img，标签和货币内容必须在其范围内垂直居中
货币不应换行，应始终以完整的方式显示
货币应始终尽可能靠近显示标签跨度。
标签文字应夹在2行，省略号显示超过2行。

注意：只需要在Chrome和基于Safari webkit的浏览器中使用。

应该看起来像：

enter image description here

但是，目前看起来像这样：

enter image description here

有什么想法吗？

********************* JS Fiddle example ********************* ***

<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...);
}

Answer 1

如果价格不会变宽，以下情况将起作用：

http://jsfiddle.net/WDjZ3/4/

我只是将margin-right转换为像素，所以我知道除了标签之外的内容占用的空间，然后为剩余部分添加了最大宽度：

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

如果价格或图像是可变宽度，则需要js来读取它们的宽度，从400px中移除并将该值添加到max-width。

以下是使用JavaScript动态设置最大宽度的示例：http://jsfiddle.net/WDjZ3/7/

我还没有检查所有尺寸，因此应该添加它以使其完全准确，否则边距将使价格不再合适。

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

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;
}

Answer 2

我已经解决了这个没有JavaScript的问题。但是，它仅适用于更现代的浏览器，包括Chrome和Opera。它不适用于Safari。一旦更新到最新规范，它将在Firefox中运行。我可以在IE10中使用它，但我必须更多地研究它。省略号仅适用于Chrome / Safari，因为它是供应商特定的。

演示位于http://jsfiddle.net/uLm92/1/

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

li {
    /* make all items inside li as flex items */
    display: -webkit-flex;
    display: flex;

    height: 40px;
    max-width: 400px;
 }

现在子项目是弹性项目，使标签适合的关键是将图像和价格设置为不弯曲。对于价格，我们知道它总是要宽40xp，所以我设置如下：

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

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

这表示id为40px的首选，并且永远不会变小。

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

.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;
}

最后，我们还希望将标签文本居中。由于你需要省略号黑客，我已经使用旧的Flexbox语法用于WebKit。不使用旧的flexbox，线夹属性不起作用：

.label {

/* 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元素是唯一可以缩小的元素，因此如果没有剩余空间，它会缩小。

使用框模型在其父div中包含项目

2 个答案: