我有一个弹性物品，里面有很长的绳子，我想把它包裹起来。但这不起作用。
I set flex 1 1 500px， 例如 （flex-basis = 500px）并且它应该用以下内容包裹字符串word wrap: break-word
但事实并非如此，而且只有当我设置width=500px，它开始起作用，所以问题是为什么flex-basis 500px不起作用而宽度起作用？
HTML:
<div class="map-detail-wrapper">
<div class="ad-detail-text">
<span>{{ad.text}}</span>
</div>
</div>
CSS:
.map-detail-wrapper {
display: flex;
flex-wrap: wrap;
}
.ad-detail-text {
flex: 1 1 0%;
width: 500px;
line-height: 20px;
font-size: 14px;
margin: 20px;
border: black;
word-wrap: break-word;
overflow: hidden;
}
在你的情况下，你允许该项目缩小给它flex: 1 1 500px这是以下内容的缩写：
flex-grow: 1;
flex-shrink: 1;
flex-basis: 500px;
由于内容较少500px宽度并且该项目允许缩小，它会的。要解决这个问题，您可以设置flex: 0 0 500px
在多数情况下flex-basis相当于width，您可以阅读有关差异的更多信息here https://stackoverflow.com/a/34355447/714143
对于之间的差异word-break: break-all and word-wrap: break-word你可以阅读更多相关内容here https://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
