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

我有一个基本的HTML结构，有一个父级

div

和两个子级：

span

和

a

。

a

向右浮动，我希望

span

随着文本内容的大小而增长，直到它碰到浮动的

a

，此时我希望文本用省略号截断

这里有一个指向JSFIDLE的链接：

.parent{
边框：实心1px黑色；
溢出：隐藏；
}
.文本{
边框：实心1px绿色；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.链接{
边框：实心1px红色；
浮动：对；
}

某些文本太长，以至于它将链接向下推而不是截断。我真正想要的是文本改为用省略号截断。

我建议放弃浮动，进入flexbox世界：

.parent{
边框：实心1px黑色；
显示：flex；/*声明flexfox*/
}
.文本{
边框：实心1px绿色；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.链接{
边框：实心1px红色；
左边距：自动；/*向右推*/
}

某些文本太长，以至于它将链接向下推而不是截断。我真正想要的是文本改为用省略号截断。

完美。我一定要赶上flexbox。谢谢你的快速回答！