与非截断元素

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，但这对可变长度不起作用。我发现的唯一解决方案是在可变长度文本上设置宽度是不可接受的。
• 使用浮点数，但即使在那里，没有设置任一文本容器的宽度，我也无法获得上面指定的行为。

有没有人有其他想法？我想避免“我会假设静态部分需要大约25％，所以我会给变量宽度为75％”。

Answer 1

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

<强> jsFiddle

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你没有提到跨度是否必须是每个用户的动态，所以我的解决方案将涉及一个小JS，使你能够硬编码宽度。我的想法是你可以说，我只希望变量文本是 x 字符，所以让我们设置它并让JS处理剩下的

＆＃13;

＆＃13;

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

＆＃13;

<span class="container">
  <span class="variable" width="25%">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>

＆＃13;

＆＃13;

＆＃13;