我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.
我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.
观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)
我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？
我不能用overflow-x: hidden.
.container {
display: flex;
width: 100%
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div> …自从Firefox Nightly(35.0a1)的最新版本(？)发布以来,我一直遇到text-overflow: ellipsis一个Flexbox容器内部的问题flex-direction: row,每列的宽度为50%.
演示:
.container {
width: 300px;
background: red;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.column {
flex-basis: 50%;
}
.column p {
background: gold;
/* Will not work in Firefox Nightly 35.0a1 */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}<div class="container">
<div class="row">
<div class="column">
<p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly …我正在尝试在CSS3中创建一个灵活的布局,其中3个盒子相互堆叠.这些框是兄弟姐妹,因此具有相同的父元素.第一个框的高度必须符合其内容.下面两个方框的高度应该增长到适合它们各自的内容,直到它们即将溢出它们的父母.在这种情况下,它们会缩小,以免它们溢出.
问题是,如果其中一个收缩盒相对于另一个收缩盒的内容较小,我无法弄清楚如何防止其中一个收缩盒被压碎.我希望那些盒子缩小到某个不会缩小的位置 - 例如,相当于两行文本.设置min-width不是一个选项,因为我不希望框内容高于其内容,以防内容只有一行.如果任何一个盒子已经到了它不再缩小的位置而且父母不能在没有溢出的情况下保持它们,那么父母将得到一个滚动条.
我事先不知道内容,所以布局必须是动态的.如果可能的话,我想用CSS解决这个问题.
以下是box3太小的问题示例:
p {
margin: 0;
}
.container, .box {
border: 1px solid black;
}
.box {
background-color: white;
margin: 1em;
overflow: auto;
}
#container {
background-color: yellow;
display: flex;
flex-direction: column;
height: 15em;
overflow: auto;
}
#box1 {
flex: 0 0 auto;
}
#box2 {
}
#box3 {
}<div id="container" class="container">
<div id="box1" class="box">
<p>?</p>
</div>
<div id="box2" class="box">
<p>??????????????????</p>
<p>??????????????????</p>
<p>??????????????????</p>
<p>??????????????????</p>
<p>??????????????????</p>
<p>??????????????????</p>
<p>??????????????????</p>
<p>??????????????????</p>
<p>??????????????????</p> …我面临的问题与此问题几乎相同:
这个解决方案非常有效:
.container {
display: -webkit-flex;
}
.container>div:first-child{
white-space:nowrap;
-webkit-order:1;
-webkit-flex: 1;
-webkit-flex: 0 1 auto; /*important*/
text-overflow: ellipsis;
overflow:hidden;
min-width:0px; /* new algorithm mises the calculation of the width */
}
.container > div:last-child {
-webkit-flex: 1;
-webkit-order:2;
background: red;
-webkit-flex:1 0 auto; /*important*/
}
.container > div:first-child:hover{
white-space:normal;
}<div class="container">
<div>foo barfoo bar</div>
<div>foo bar</div>
</div>
<div class="container">
<div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo …我正在使用最新的灵活盒子规格(据我所知,目前仅由最新的Chrome支持)并且我试图阻止弹性物品超过最大高度.
最好用一个例子解释:http://jsbin.com/efedof/2/edit
第一个例子.content(加上两个.bar元素)不超过高度300px,所以是正确的.但是在第二个例子中,文本.content在.boxdiv 之外向下推动底部.
如何强制三者结合柔性物品的最大总高度,从而使.content区域变得滚动,而不是拉伸的外.box和推.bar出的.box？
谢谢.