浮动时基于百分比的最大宽度的问题

Question

在div中，我浮动了一个跨度。在该范围内，有一个子跨度，根据百分比设置最大宽度（使用百分比，因为我希望它能够响应）。

问题

漂浮的跨度有一个兄弟跨度，我想坐在它旁边。但是，当我使用百分比max-width作为子跨度时，容器跨度保持全宽（主要包含空格）。

代码

CSS

.ellipsis-text {
    ...
    max-width: 40%;
    ...
}

HTML

<!-- Floating span -->
<span class="pull-left">
    <!-- Child span with max-width -->
    <span class="ellipsis-text">
        ellipsis text that should cut off
    </span>
</span>
<span class="pull-left">
    second text
</span>

JSFiddle：http://jsfiddle.net/robcampo/LJqwW/6/

解决方案

当我使用像素时，它可以工作，但由于这应该是响应，百分比更好。此外，它的工作没有父跨度浮动，但我需要在我的解决方案中。

是否有一种干净的方法可以确保父母跨度不会延伸100％？

Answer 1

具有未指定宽度和高度的浮动元素会与其子项一样扩展。在这种情况下，儿童的百分比宽度显然不起作用。这是一个替代解决方案，似乎适用于响应式设计：

<div style="overflow: hidden;">
    <span style="float: right;">second text</span>
    <span style="display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">ellipsis text that should cut off</span>
</div>

Demo Here

缺点是跨度的顺序已经改变。

Answer 2

父级跨度应该显示为阻止并浮动到左侧，并且必须手动使用宽度大小来处理子宽度大小。 子跨度应显示为阻止，向左浮动，宽度大小为百分比或px

Answer 3

比较渲染，您可以清楚地看到省略号文本占其父级的40％。

我认为您目前正在使用破碎的浏览器。

Firefox 28的渲染（注意FF 38不存在）。

<!-- Problem with this row -->
<div class="row">
    <div class="col-md-12">
        <span class="pull-left">
            <span class="ellipsis-text">
                ellipsis text that should cut off
            </span>
        </span>
        <span class="pull-left snd">
            second text
        </span>
    </div>
</div>

CSS：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 .ellipsis-text {
    display: inline-block;
    max-width: 40%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    vertical-align: middle;
}
.ellipsis-text {
    background: rgba(0, 255, 255, .25);
}
.ellipsis-text-px {
    max-width: 40px;
}
.ellipsis-text-small {
    max-width: 5%;
}
.pull-left {
    background: rgba(255, 255, 0, .25);
}
.pull-left.snd {
    background: rgba(255, 0, 0, .25);
}