浮动布局中的单行文本未按预期截断

Question

我有一个基本的 HTML 结构，其中有一个父 div 和两个子：span 和 a。 a 向右浮动，我希望 span 随着其文本内容的大小而增长，直到它到达浮动的 a，此时我希望文本用省略号截断。

这是一个 JSFiddle 的链接：https://jsfiddle.net/56ua0jc8/

.parent {
  border: solid 1px black;
  overflow: hidden;
}

.text {
  border: solid 1px green;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link {
  border: solid 1px red;
  float: right;
}

<div class="parent">
  <span class="text">Some text that is so long that it's pushing the link down instead of truncating. What I really want is for the text to truncate with ellipses instead.</span>
  <a class="link" href="someUrl">Link</a>
</div>

目前span 正在展开并向下推浮动的a，而不截断文本。我怎样才能让它工作？

Answer 1

我建议放弃浮动并进入弹性盒子世界：

.parent {
  border: solid 1px black;
  display: flex; /*declare flexfox*/
}

.text {
  border: solid 1px green;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link {
  border: solid 1px red;
  margin-left: auto; /*push it to the right*/
}

<div class="parent">
  <span class="text">Some text that is so long that it's pushing the link down instead of truncating. What I really want is for the text to truncate with ellipses instead.</span>
  <a class="link" href="someUrl">Link</a>
</div>