Html 以“100%”宽度div显示省略号

首先，在这种情况下有很多问题，我试图解决这个问题，但没有成功。所以，让我解释一下

这就是我所拥有的：

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

这是HTML。顺便说一下，ell是一个用于添加省略号的帮助器类。left和right是用于浮动的帮助器类。最后，cf用于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>

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

所以，日期的宽度必须是静态的，名称必须是流动的。当日期到达标题时，名字应该有省略号

谢谢。

。标题内容{ 空白：nowrap； 溢出：隐藏； 文本溢出：省略号； }

---

我找到了答案。如果有人有同样的问题，请在该链接中完全执行

---

这不是我需要的。我在那里说过，这里有一个叫做ell的助手类。

  .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;
  }

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