html - div 容器中的表格布局和省略号

Question

我有一个动态表格/表格单元格布局，分为左中和右内容，当其客户区达到 30% 时，左和中显示省略号。现在我必须将左边和中间包裹到一个 div 容器中并保持原来的行为。有什么想法吗？

原文:

    <style>
        .container {
            width: 100%;
            display: table;
            background: #eee;
        }

        .leftContent {
            display: table-cell;
            vertical-align: middle;
            background: #999;
            height: 30px;
            width: 30%;
        }

        .middleContent {
            display: table-cell;
            vertical-align: middle;
            width: 30%;
            background: #aaa;
            max-width: 0px;
        }

        .rightContent {
            display: table-cell;
            vertical-align: middle;
            white-space: nowrap;
            text-align: right;
            background: #ccc;
        }

        .setEllipsis {
            max-width: 0px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>

    <div class="container">

        <div class="leftContent setEllipsis">A very long text that should be ellipsed.</div>

        <div class="middleContent setEllipsis">Again a long text that should be ellipsed.</div>

        <div class="rightContent">
            <div>Fix content</div>
        </div>

    </div>

包装:

    <div class="container">

        <div class="leftContent">
            <div class="setEllipsis">A very long text that should be ellipsed.</div>
        </div>

        <div class="middleContent">
            <div class="setEllipsis">Again a long text that should be ellipsed.</div>
        </div>

        <div class="rightContent">
            <div>Fix content</div>
        </div>

    </div>

Answer 1

为了让省略号在表格中正常工作，您应该设置table-layout:fixed。

.container {
  display: table;
  table-layout: fixed;
  width: 100%;
}

jsFiddle

.container {
  display: table;
  background: #eee;
  table-layout: fixed;
  width: 100%;
}

.leftContent {
  display: table-cell;
  vertical-align: middle;
  background: #999;
  width: 30%;
}

.middleContent {
  display: table-cell;
  vertical-align: middle;
  background: #aaa;
  width: 30%;
}

.rightContent {
  display: table-cell;
  vertical-align: middle;
  background: #ccc;
  text-align: right;
}

.setEllipsis {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="container">

  <div class="leftContent">
    <div class="setEllipsis">A very long text that should be ellipsed.</div>
  </div>

  <div class="middleContent">
    <div class="setEllipsis">Again a long text that should be ellipsed.</div>
  </div>

  <div class="rightContent">
    <div>Fix content</div>
  </div>

</div>