html - float 时基于百分比的最大宽度问题

Question

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

问题

float 跨度有一个兄弟跨度，我想坐在它旁边。但是，当我对子跨度使用百分比 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/

解决方案

当我使用像素时，它可以工作，但由于这应该是响应式的，所以百分比更好。此外，它可以在父跨度不 float 的情况下工作，但我的解决方案中需要它。

是否有一种干净的方法来确保父跨度不会 100% 拉伸(stretch)？

Answer 1

未指定宽度和高度的 float 元素与其子元素一样展开。在这种情况下， child 的百分比宽度显然不起作用。这是一个似乎适用于响应式设计的替代解决方案:

<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

缺点是span的顺序变了。