我有一个非常长的字符串的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;
}
答案 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-all
和word-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;”