Flexbox 项目多行文本溢出

Question

我有一个里面有很长字符串的 flex 项目，我希望它被包裹起来。但它不起作用。

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;
}

Answer 1

在您的情况下，您允许该项目缩小给它flex: 1 1 500px它的缩写：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 500px;

由于内容小于500px宽度并且项目允许缩小，所以它会。要解决该问题，您可以设置flex: 0 0 500px

在大多数情况下flex-basis相当于width，您可以在此处阅读有关差异的更多信息

对于 和 之间的区别word-break: break-all，word-wrap: break-word您可以在此处阅读更多相关信息