html - 截断元素与非截断元素并排

Question

我有一个包含两部分文本的容器:可变长度部分和静态部分。

我希望截断可变长度部分(a-la text-overflow: ellipsis)，以便容器始终保持在一行。

这里有一张图片来说明:

---

现在，我知道我可以像这样在容器上使用 display: flex 相当简单地解决它:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
}

.variable {
  margin: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.static {
  padding: 0 5px;
  white-space: nowrap;
}

<span class="container">
  <span class="variable">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum dolorum repudiandae in, delectus similique quos natus facilis non odit laudantium unde nostrum aperiam doloremque magni cum ipsum recusandae repellat iusto quo architecto. Ea reiciendis, natus at fuga officiis, cupiditate voluptatem in, sed quae vero est nesciunt quidem tempora, dignissimos sapiente cumque eveniet. Eaque, fugiat voluptates mollitia veniam, blanditiis aut deleniti. Nesciunt sapiente vitae aut, fugit in commodi neque hic reiciendis, et cupiditate possimus, quod quaerat ducimus ea cumque nihil praesentium. Nesciunt velit magni asperiores optio quam, provident eum earum? Illo et illum, autem ratione! Perferendis non facere, ratione quas beatae?</span>
  <span class="static">| Static Text</span>
</span>

但是，我需要 IE8 或更高版本的支持。所以 flexbox 肯定被淘汰了。

我试过了

• display: table 和 display: table-cell，但这对可变长度来说效果不佳。我发现的唯一解决方案是设置可变长度文本的宽度，这是 Not Acceptable 。
• 玩花车，但即使在那里，没有设置任何一个文本容器的宽度，我也无法获得上面指定的行为。

有没有人有其他想法？我想避免“我假设静态部分占 ~25%，所以我将 75% 给可变宽度部分”。

Answer 1

这里有一个嵌套CSS表的解决方案，关键是将内表设置为table-layout:fixed; , 它是 CSS 所必需的 ellipsis .

jsFiddle

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

.variable,
.static {
  display: table-cell;
  white-space: nowrap;
}

.variable {
  width: 100%;
}

.static {
  padding: 0 5px;
}

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

.variable-cell {
  display: table-cell;
  text-overflow: ellipsis;
  overflow: hidden;
}

<span class="container">
  <span class="variable">
    <span class="variable-table">
      <span class="variable-cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum dolorum repudiandae in, delectus similique quos natus facilis non odit laudantium unde nostrum aperiam doloremque magni cum ipsum recusandae repellat iusto quo architecto. Ea reiciendis, natus at fuga officiis, cupiditate voluptatem in, sed quae vero est nesciunt quidem tempora, dignissimos sapiente cumque eveniet. Eaque, fugiat voluptates mollitia veniam, blanditiis aut deleniti. Nesciunt sapiente vitae aut, fugit in commodi neque hic reiciendis, et cupiditate possimus, quod quaerat ducimus ea cumque nihil praesentium. Nesciunt velit magni asperiores optio quam, provident eum earum? Illo et illum, autem ratione! Perferendis non facere, ratione quas beatae?
      </span>
    </span>
  </span>
<span class="static">| Static Text</span>
</span>