Flexbox 项目多行文本溢出答案

【问题标题】：Flexbox item multiline text overflowFlexbox 项目多行文本溢出
【发布时间】：2017-05-18 20:33:01
【问题描述】：

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

我设置了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;
}

【问题讨论】：

标签： css flexbox

【解决方案1】：

在您的情况下，您允许项目缩小给它flex: 1 1 500px，它是以下简称：

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

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

在大多数情况下flex-basis 等同于width，您可以阅读更多关于区别here 的信息

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

【讨论】：

感谢您的回答，但它不起作用。你可以在这个例子中检查它。 w3schools.com/code/tryit.asp?filename=FFPNFOV52YNW
在这种情况下，您告诉每个项目是 100% 父项的宽度

【解决方案2】：

终于找到了解决办法。你可以在那里看到它https://www.w3schools.com/code/tryit.asp?filename=FFPNFOV52YNW

添加就够了 “断词：打破一切；” 即使没有“宽度”，它也开始工作，只有“flex-basis”。

但我仍然想知道为什么 "word-wrap: break-word" 仅适用于 "width", 并且要仅使用 flex-basis 进行自动换行，它需要 "word-break: break-all;"

【讨论】：