我正在使用弹性盒布局 https://css-tricks.com/snippets/css/a-guide-to-flexbox/设置过去任务列表的样式。任务描述和时间的长度总是变化很大。
一切看起来都很棒，直到输入足够长的任务描述以换行到第二行，然后“时间”项（位于屏幕最右侧）稍微向右推 - 离开屏幕 - 隐藏一些内容。
您可以看到下面完美地显示了简短的描述，但是长的描述将应该是“00:08”的内容推离了屏幕，并且任务描述也移到了左侧！
Here's a fiddle http://jsfiddle.net/pmdav1eg/对于代码（根据 Stackoverflow 的规则如下）。
如果你调整包含结果的窗格的大小“00:08”并没有脱离页面，但它显然向右移动得太远。
上面的屏幕截图是在 Chrome 或 Safari（我使用的两种浏览器）中缩小窗口宽度直到描述换行到第二行时的情况。
如果可能的话，我希望所有内容都按照第一行（简短描述）显示！还要了解为什么会出现现在的情况。
附：我尝试过使用浮动和表格显示布局，但这两种技术都导致了相当多的错误，主要是因为内容长度可变（所以请不要建议将它们作为替代方案:)）。
ul {
margin:0;
padding: 0;
}
#tasklist{
width: 100%;
}
.task-one-line{
display: flex;
flex-direction:row;
flex-wrap: nowrap;
justify-content: space-between;
align-item: baseline; /*flex-end*/
display: -webkit-flex;
-webkit-flex-direction:row;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
-webkit-align-item: baseline;
border-bottom: 1px solid #d3d3d3;
width: 100%;
}
.task-one-line i{
width:1.5em;
padding: 0.5em 0.3em 0.5em 0.3em;
/*border: 1px solid green;*/
}
span.task-desc{
flex-grow: 5;
-webkit-flex-grow: 5;
text-align:left;
padding: 0.3em 0.4em 0.3em 0.4em;
/*border: 1px solid red;*/
}
span.task-time{
flex-grow: 1;
-webkit-flex-grow: 1;
flex-basis:4em;
-webkit-flex-basis:4em;
text-align:right;
padding: 0.3em 0.5em 0.3em 0.5em;
/*border: 1px solid blue ;*/
}
<ul id="tasklist">
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">And a short one</span>
<span class="task-time">00:01</span>
</li>
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">Here's a super long long long long long long description that might wrap onto another line</span>
<span class="task-time">00:08</span>
</li>
</ul>
我遇到了类似的问题，我创建了一支笔并进行了修复：
https://codepen.io/anon/pen/vRBMMm https://codepen.io/anon/pen/vRBMMm
.flex {
display: flex;
padding: 8px;
border: 1px solid;
}
.a {
margin-right: 16px;
}
.b {
flex: 1;
background: #ffbaba;
min-width: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.c {
flex-shrink: 0;
margin-left: 16px;
}
<div class="flex">
<div class="a">1st div</div>
<div class="b">HELLO2HELLO2 HELLO2HELLO2 2222 HELLO2HELLO 22222</div>
<div class="c">3rd div</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
