Flexbox项目多行文本溢出

时间:2017-05-18 09:10:21

标签: css css3 flexbox

我有一个非常长的字符串的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;
}

2 个答案:

答案 0 :(得分:4)

在您的情况下,您允许该项目缩小,并为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-allword-wrap: break-word之间的差异,您可以详细了解here

答案 1 :(得分:1)

最终找到了解决方法。你可以在https://www.w3schools.com/code/tryit.asp?filename=FFPNFOV52YNW

看到它

足以添加 “断言:打破一切;” 并且即使没有“宽度”也只能使用“flex-basis”开始工作。

但我还是想知道为什么 “word-wrap:break-word”仅适用于“width”, 并且只使用flex-basis进行自动换行,它需要“word-break:break-all;”