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

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，但这对可变长度来说效果不佳。我找到的唯一解决方案是在不可接受的可变长度文本上设置宽度。
玩浮动，但即使在那里，如果没有设置任一文本容器的宽度，我也无法获得上面指定的行为。

还有人有其他想法吗？我想避免 "I'll assume that the static part takes ~25% so I'll give 75% to the variable width one".

Answer 1

这是一个嵌套CSS table的解决方案，关键是将内部table设置为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>

Answer 2

你没有提到跨度是否必须是每个用户动态的，所以我的解决方案将涉及一些 JS，让你能够硬编码宽度。这个想法是你可以说 好吧，我只希望变量文本是 x 个字符，所以让我们将其设置为那个，让 JS 处理其余的 [=23] =].

var query = document.querySelectorAll('span.variable'); //Query to grab any spans with this name. //Only run if there are elements(s) if (query.length > 0) { var variableLabel = query[0]; //For now assuming there's one, but this could be looped instead. var maxLength = 45; //Max length to allow, can be modified. variableLabel.innerText = variableLabel.innerText.substring(0,maxLength) + "..." //Set the text, with eplipsis. }

 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? | Static Text

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

Truncated element side-by-side with non-truncated element

html

css

internet-explorer-8