单线文本在浮点布局中未预期的截断

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

我建议放下float并输入flexbox世界：

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