Table layout and ellipsis in div container

Question

I have a dynamic table / table-cell layout divided to left middle and right content where the left and the middle one display ellipsis when its client area reach 30%. Now I have to wrap the left and the middle into a div container and keep the original behaviour. Any idea?

The original:

    <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>

The wrapped:

    <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

In order to have ellipsis to work properly in table, you should set 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>