0

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

我在这里创建了一个 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; 省略号没有按预期工作。

如何让流体表与省略号一起使用？

4

1 回答 1

0

我所做的是添加一个带有内部块样式的段落元素。然后我使用 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>
于 2013-10-06T19:19:56.243 回答