Html 使行中三个元素的中间填充剩余空间

我需要三个要素。两边有两个元素，中间有一个文本元素。中间的文本需要左对齐（浮动）到第一个元素。

当页面缩小时，我需要用省略号截断文本。但是在指定溢出样式之后，当页面缩小到小于三个组合的宽度时，它们开始移动到新位置并移出父容器

##这是示例文本##会变成
##这是samp##
（其中
###
是侧元素），如果宽度不能容纳所有元素


.container{
高度：30px；
背景色：#ff0000；
}
.container>首先是.container{
显示：内联块；
背景色：#0000ff；
宽度：20px；
高度：30px；
浮动：左；
}
.container>.container秒{
显示：内联块；
线高：30px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
浮动：左；
}
.container>第三个容器{
显示：内联块；
背景色：#00ff00；
宽度：20px；
高度：30px；
浮动：对；
}

这个有示例文本！
我正在为
.container
使用flexbox，并为
.container second
设置
flex:1
。这样可以删除所有浮动，文档流保持不变

希望这有帮助


.container{
高度：30px；
背景色：#ff0000；
显示器：flex；
}
.container>.container秒{
弹性：1；
}
.container>首先是.container{
显示：内联块；
背景色：#0000ff；
宽度：20px；
高度：30px；
}
.container>.container秒{
显示：内联块；
线高：30px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.container>第三个容器{
显示：内联块；
背景色：#00ff00；
宽度：20px；
高度：30px；
}

这个有示例文本！这个有示例文本！这个有示例文本！这个有示例文本！这个有示例文本！
这可以通过使用bootstap网格、CSS溢出和文本溢出属性轻松完成。
您需要在head部分链接引导文件。

看看这个。

。省略号{
文本对齐：左对齐；
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
}


你好你好
你好你好你好
你好你好
比我希望的还要简单。谢谢。Bootstrap从来都不是用其他方法很容易就能解决的问题的答案。Bootstrap和诸如此类的方法可以使构建整个站点变得更容易，而不是为一个问题添加依赖项。没错，但这只是另一种方法，因为使用flex-box已经得到了解决。