html – Flexbox – 带有“无包装”文本的流体列

概述我正在尝试设置一个包含三列的flexbox布局.左列和右列具有固定的宽度.中间列具有流体宽度以填充可用空间,但它包含一个长文本,不应该包装,而是使用省略号. 遗憾的是,非包装文本不能提供列占用可用空间的能力,并将整个布局推送到父元素的边界之外. img { max-width: 100%;}#container { display: flex; max-width: 9 我正在尝试设置一个包含三列的flexBox布局.左列和右列具有固定的宽度.中间列具有流体宽度以填充可用空间,但它包含一个长文本,不应该包装,而是使用省略号.

遗憾的是,非包装文本不能提供列占用可用空间的能力,并将整个布局推送到父元素的边界之外.

img {    max-wIDth: 100%;}#container {    display: flex;    max-wIDth: 900px;}.column.left {    wIDth: 350px;    flex: 0 0 350px;}.column.right {    wIDth: 350px;    flex: 0 0 350px;}.column.center {   // fluID wIDth required}h1 { white-space: nowrap; overflow: hIDden; text-overflow: ellipsis;}

<div ID="container">  <div >    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">  </div>  <div >    <h1>     This is long text. If overflow use ellipsis    </h1>  </div>  <div >    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">  </div></div>

链接到小提琴：
http://jsfiddle.net/2Lp8d80n/

任何帮助表示赞赏.

解决方法 你可以在.center列上添加flex：1和overflow：hIDden.

当你设置flex：0 0 350px;没有必要定义宽度,宽度固定为350px,或者在这种情况下是flex-basis.

img {  max-wIDth: 100%;}#container {  display: flex;  max-wIDth: 900px;}.column.left {  flex: 0 0 350px;}.column.right {  flex: 0 0 350px;}.column.center {  flex: 1;  overflow: hIDden;}h1 {  white-space: nowrap;  overflow: hIDden;  text-overflow: ellipsis;}

<div ID="container">  <div >    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">  </div>  <div >    <h1>     LONG LONG TEXT LONG LONG TEXT LONG LONG TEXT    </h1>  </div>  <div >    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">  </div></div>

总结

以上是内存溢出为你收集整理的html – Flexbox – 带有“无包装”文本的流体列全部内容，希望文章能够帮你解决html – Flexbox – 带有“无包装”文本的流体列所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。