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

Question

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

这是 JSFiddle 的 link：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

我建议放弃浮动并进入 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>

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

Single-line text not truncating as expected in float layout

html

css

css-float

ellipsis