在“100％”宽度div

Question

首先，关于这种情况有很多问题，我尝试解决这个问题，但这对我来说没有用。所以，让我解释一下......

这就是我所拥有的：

我有一个带100% width的div标签，用于显示文章的名称和日期。名称向左浮动，日期向右浮动。此外，文章是明确的。所以，他们没问题。

这是HTML。顺便说一句，ell是一个添加省略号的辅助类。左，右是浮动的助手类。最后，cf是for clearfix。

  <div class="article">
    <a href="{{post.url}}">
      <div class="article-meta cf">
        <div class="article-name left ell">{{post.title}}</div>
        <div class="article-date right">{{post.date | date: "%b %d, %Y"}}</div>
      </div>
    </a>
  </div>

直到这里一切都很完美。这是CSS：

  .article{
    margin-bottom: 1rem;
    &:last-child{ margin-bottom: 0; }
  }

  .article-meta{

    width: 100%;
  }

  .article-name{
    display: table-cell;
    width: 85%;
  }

  .article-date{
    display: table-cell;
    width: 9rem;
    // width: 15%;
    margin-left: 2rem;
    background-color: pink;
  }

我不想在.article-date中使用百分比，因为当我最小化页面时，在一些像素之后，年份部分，转到第二行。就像在这张图片中一样：

因此，date的宽度必须是静态的，name必须是流畅的。当date到达title时，name应该有省略号。

谢谢。

Answer 1

我找到了答案。如果有人遇到同样的问题，请完全按照此链接进行操作。

http://jsfiddle.net/blai/7u59asyp/

.myTable {
    display: table;
    width: 100%;
}

.myTable:before {
    display: table-column;
    width: 100%;
    content: '';
}

.flexibleCell {
    display: table-cell;
    max-width:1px;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}

.staticCell {
    white-space: nowrap;
}


<div class="myTable">
    <div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div>
    <div class="staticCell">Less content</div>
</div>

Answer 2

.titleContent  {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

JSFiddle demo