html - 在CSS中如何实现，两个单元格在固定宽度的父单元中具有自动宽度，优先查看第二个单元格中的内容并在第一个单元格中使用省略号？

Question

我想在同一行有地址和号码。例如在 400px 父 div 中。但是，如果地址 + 数字超过 400px 长度，我想为地址添加省略号并显示没有裁剪的数字。

我的代码在这里，但我只为数字做了固定宽度。如果数字太短，我希望此数字的自动宽度不会在地址和数字之间留出太多空间。

<div class="container">
    <table>
        <tr>
            <td class="ellipsis">LongLongLongLongLongLongLongLongLongLongLongWord</td>
            <td style="width:35px;">1234</td>
        </tr>
    </table>
</div>

div.container {
    width:400px;
    border:dashed 1px;
    overflow:hidden;
}
table {
    table-layout: fixed;
    width: 100%
}
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

访问http://jsfiddle.net/ArfUA/3/

Answer 1

为了实现这一点，您设置float:right了您始终希望可见的元素，并且您

用省略号设置display:block为另一个元素。

小提琴

标记

<div class="container">
    <span class="short">1234</span>
    <span class="long ellipsis">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord</span>
</div>

CSS

.container {
    width:400px;
    border:dashed 1px;
    overflow:hidden;
}
.short {
    float: right;
    background: yellow; /*just for demo; */
}
.long
{
    display: block;
    background: pink; /*just for demo; */
}
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

Answer 2

html

<div class="container">
    <div class="ellipsis addname">LongLongLongLoLongLongLongLoLongLongLongLoLongLongLongLoLongLongLongLo</div>
            <div class="addnum">1234</div>
</div>

css

div.container {
    width:400px;
    border:dashed 1px;
    overflow:hidden;
}
table {
    table-layout: fixed;
    width: 100%
}
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}
.addname{
    max-width:90%;
}
.addnum{
    max-width:10%;
    /*margin-left:-2px;*/
}

.addname,.addnum{
    float:left;
}
.container{
    padding-left:4px;
    padding-right:4px;
}

http://jsfiddle.net/ArfUA/5/

Answer 3

看起来标记中包含的内容不是表格数据。通过使用 DIV 来解决此问题，然后应用 CSS：

标记：

<div class="container">
    <div class="column address">[long text]
    </div>
    <div class="column text">[short text]
    </div>
</div>

CSS：

.container {
    height: auto;
    overflow: hidden; /* clears floats */
    width: 400px
}
.column {
    display: inline-block;
    max-height: 400px;
    overflow: hidden;
    text-overflow: ellipsis
}
.text {
    width: 35px
}

现在，可以使用第二个 css 类来区分不同的列。