Flexbox项目多行文本溢出

我有很长的字符串里面的flex项目，我希望它被包装。但它不起作用。Flexbox项目多行文本溢出

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

来源

2017-05-18 Simon

在你的情况您允许的项目萎缩给它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

来源

2017-05-18 09:19:21

谢谢你的回答，但它不起作用。你可以在这个例子中检查它。 https://www.w3schools.com/code/tryit.asp?filename=FFPNFOV52YNW – Simon

在这种情况下，你告诉每个项目是'100％'父母的宽度 –

Finnally找到解决方法。你可以看到它https://www.w3schools.com/code/tryit.asp?filename=FFPNFOV52YNW

它足以添加 “word-break：break-all;” ，即使没有“宽度”，也只有“基于柔性”才能开始工作。

，但我仍然不知道为什么 “自动换行：打破字”仅适用于“宽度”，并且使自动换行只能用柔性基础它需要“字突破：突破 - 所有;”

来源

2017-05-18 09:42:04 Simon

Flexbox项目多行文本溢出

回答

相关问题