Question

参考this。

HTML：

<div class="w">
    <span class="e e1">Tag</span>
    <span class="e e2">type</span>
    <span class="e e3">This is a long text, and I hope it can end with ellipsis if it's really too long</span>
    <span class="e e4">Jul 27 2014</span>
    <span class="e e5">Comment</span>
</div>

css：

.w {
    border: 1px solid red;
}

.e {
    vertical-align: middle;
    display: inline-block;
    border: 1px solid #333;
    white-space:nowrap;
}

.e3 {
    overflow: hidden;
    text-overflow: ellipsis;
}

我希望所有五个元素都能在同一行显示。除了e3之外的所有元素都会显示其所有内容。剩余的宽度将分配给e3。如果宽度不足以显示e3中的所有内容，则省略号将显示在e3的末尾。

我更倾向于将width属性硬编码为e3以获取线宽，而其他元素的宽度可能会发生变化。

我该如何实现？

Answer 1

更改

显示div的属性，将类'w'显示为flex

.w {
 border: 1px solid red;
    display: flex;
}

对于span中的字符串（除了具有类.e3的字符串）可见，将min-width设置为那些跨度

喜欢Check code : by setting min-width

或者您可以使用@media Rule来相应地以不同的分辨率响应您的网站

Answer 2

使用flexbox是你在CSS中实现这一目标的唯一方法，像ie9这样的旧浏览器不会支持这一点。使用此功能时，请确保使用所需的所有前缀。以下解决方案应该处理所有事情，并为旧浏览器提供不理想的解决方案，但保持一致。

.w {
  border: 1px solid red;
  white-space:nowrap;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex; 
}

否则唯一的选择是使用javascript来获取.w的宽度和除.e3之外的所有.e的宽度，然后减去两者并使用其结果明确设置.e3的宽度。

$(".w").each(function(){
    //Initialize variables
    var totalWidths = 0,
        thisWidth = $(this).width(),
        e3Width = 0;
    //Loop over every E and add their width to total widths
    $(this).find(".e").not(".e3").each(function(){
        totalWidths += $(this).width();
    });
    //Calculate our final width and subtract 10 to account for borders
    e3Width = thisWidth - totalWidths - 10;
    //Set the width
    $(this).find(".e3").width(e3Width);
});

我为你创建了一个有效的jsfiddle here。正如你所看到的那样，我还将所有元素都悬浮起来，这样它们就会彼此相邻。如果您更改边框或边距，请不要忘记在javascript中考虑到这一点。

如何根据线条的剩余宽度使一个元素改变其宽度？

2 个答案: