截断元素与非截断元素并排-解网

问：

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

我希望可变长度部分被截断（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%”。

HTML CSS 互联网浏览器-8

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

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

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

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

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

评论

评论

评论