Question

假设我有一个包含两列的表格，我希望右列宽度为表格单元格内容的大小，左列宽度尽可能宽。我还希望左列不要换行并显示省略号。

我在这里创建了一个jsfiddle示例http://jsfiddle.net/fTd8m/

<style type="text/css">
.parent{
    display:table;
    table-layout:fixed;
    width:100%;
}
.left-column{
    display:table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}
.right-column{
    text-align:right;
    display:table-cell;
}
</style>

<div class="parent">
    <div class="left-column">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="right-column">
        Right Column
    </div>
</div>

我遇到的问题是让左栏尽可能宽。如果我删除了css table-layout：fixed;省略号不能按预期工作。

如何使用流量表来处理省略号？

Answer 1

我所做的是添加一个用inner-block设计的段落元素。然后我使用jQuery迭代通过右列中的所有元素来测量它们的最大宽度。然后我将最大宽度分配给了列。

您可以在此jsfiddle链接http://jsfiddle.net/jvgRV/

下找到我的解决方案

<script type="text/javascript">
$(function() {
    var maxWidth = 0;
    //go through each paragraph in the right column and find the widest value.
    $(".innerParagraph").each(function() {
        if(maxWidth < $(this).width()){
            maxWidth = $(this).width();
        }
    });
    // assign max width to column
    $(".right-column").width(maxWidth);
});
</script>

<style type="text/css">
.table{
    display:table;
    table-layout:fixed;
    width:100%;
}
.row{
    display:table-row;
}
.left-column{
    display:table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}
.right-column{
    text-align:right;
    display:table-cell;
}
.innerParagraph{
    display:inline-block;   
}
</style>

<div class="table">
    <div class="row">
        <div class="left-column">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="right-column">
            <p class="innerParagraph">Right Column</p>
        </div>
    </div>
    <div class="row">
        <div class="left-column">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="right-column">
            <p class="innerParagraph">Right Column wider</p>
        </div>
    </div>
</div>

如何使用流量表来处理省略号？

1 个答案: