带有省略号的浮动div的CSS - 宽度未知

Question

两个div如何并排浮动，左边会显示省略号而右边不会换行？

这是理想的结果：

问题是，我需要在不指定左右div的宽度的情况下执行此操作。

这是一个jsFiddle：http://jsfiddle.net/k8hhhjc0/1/

指定宽度时，它可以正常工作。没有宽度，右侧div被按下：

是否可以不指定左右div的宽度？正确的div总是很小。

Note:在jsFiddle中，我只能控制div标签，周围的表可以根据用户首选项具有可变宽度。

Answer 1

方法1：使用CSS table执行此操作，需要具有第二列的固定宽度。

http://jsfiddle.net/pbw2jdc8/（调整输出框架更窄并查看）

.outer {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.row {
    display: table-row;
}
.topLeft, .botLeft {
    display: table-cell;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    white-space: nowrap;
}
.topRight, .botRight {
    display: table-cell;
    width: 60px;
    text-align: right;
}

<table style="width:270px;border:1px solid grey;">
    <tr>
        <td>
            <div class="outer">
                <div class="row">
                    <div class="topLeft">Firstl line, this is long line and needs to show eclipise</div>
                    <div class="topRight">12:30pm</div>
                </div>
                <div class="row">
                    <div class="botLeft">Second line also long and needs to show eclipise</div>
                    <div class="botRight"><img height='16' width='16' src='http://s12.postimg.org/jbo7bw449/test.png'/></div>
                </div>
            </div>
        </td>
    </tr>
</table>

方法2：使用CSS flexbox，无需固定宽度。

http://jsfiddle.net/ktmwqqzk/（调整输出框架更窄并查看）

.row {
    display: flex;
}
.topLeft, .botLeft {
    flex: 1 1 0;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    white-space: nowrap;
}
.topRight, .botRight {
    text-align: right;
}

<table style="width:270px;border:1px solid grey;table-layout:fixed;">
    <tr>
        <td>
            <div class="row">
                <div class="topLeft">Firstl line, this is long line and needs to show eclipise</div>
                <div class="topRight">12:30pm</div>
            </div>
            <div class="row">
                <div class="botLeft">Second line also long and needs to show eclipise</div>
                <div class="botRight"><img height='16' width='16' src='http://s12.postimg.org/jbo7bw449/test.png'/></div>
            </div>
        </td>
    </tr>
</table>

方法3：浮动第一招，再次table-layout:fixed需要确保两个文本框都正确{。}}。

http://jsfiddle.net/rmLsa5aw/（调整输出框架更窄并查看）

ellipsis

.topLeft, .botLeft {
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    white-space: nowrap;
}
.topRight, .botRight {
    float: right;
}

Answer 2

删除你的CSS中的浮动 并将你的div放在右上方

<div class="outer">
<div class="topRight">12:30pm</div>
<div class="topLeft">Firstl line, this is long line and needs to show eclipise</div>

然后你的css woule

.topLeft {
xxxwidth:215px;
text-overflow:ellipsis;    
overflow:hidden;
word-wrap:break-word;
white-space:nowrap;
}

http://jsfiddle.net/rfmny0a4/