jquery - 可调整大小的 div 内的 div 内的文本溢出 float div

Question

在一个 jquery 可调整大小的 div 内部，我有许多行 div，并且在每一行中都有一个左右浮动的 div。当可调整大小的 div 小于两个 float div 时，我希望左浮动 div 使用 text-overflow:ellipsis。正确的 float 潜水应该保持相同的大小。我试着给左边的 div 一个右边距，如另一个问题中所建议的那样，但这似乎忽略了可调整大小的 div 的大小。

这是我的目标示例:

全尺寸行:

left div       right div

行调整到更小的宽度:

lef... right div

html:

<div resizable>
    <div class="row">
        <div class="floatleft">test1 hello</div>
        <div class="floatright">test2 hello</div>
    </div>
    <div class="row">
        <div class="floatleft">test3 hello</div>
        <div class="floatright">test4 hello</div>
    </div>
</div>

CSS:

div[resizable] {
    border: 1px solid Black;
    width: 50%;
}

.floatleft {
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
}

.floatright {
    float: right;
    white-space: nowrap;
}

.row {
    overflow: hidden;
}

Fiddle(使用 angularjs 但不用担心):

http://jsfiddle.net/dfjrp8h5/1/

如果您能解释为什么 float div 右边距不起作用，则加分。谢谢!

Answer 1

为什么你 float:left左 <div> ？代码中的第一个必须是正确的 <div>与 float:right .左侧 block 必须有 overflow:hidden用于清算。

HTML:

<div resizable>
    <div class="row">
        <div class="floatright">test2 hello</div>
        <div class="floatleft">test1 hello</div>
    </div>
    <div class="row">
        <div class="floatright">test4 hello</div>
        <div class="floatleft">test3 hello</div>
    </div>
</div>

CSS:

.floatleft {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floatright {
    float: right;
    white-space: nowrap;
    margin-left:10px;
}

DEMO

margin-right在 float <div>工作正常。