Flexbox multiline text overflow element
I have a flex item with a very long string inside and I want it to be hacked. But it doesn't work.
I have set flex 1 1 500px
for example ( flex-basis = 500px
) and it should wrap the string withword wrap: break-word
But it is not, and only if I install width=500px
it starts to work, so the question arises, why flex-basis 500px
does width not work and work?
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;
}
source to share
In your case, you allow the element to shrink, giving it flex: 1 1 500px
, which is inappropriate for:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 500px;
since the content is smaller than the width 500px
and the element is allowed to compress, it will. To fix this, you can installflex: 0 0 500px
flex-basis
Equivalent in most cases width
, you can read more about the differences here
For the difference between word-break: break-all
and word-wrap: break-word
you can read about it here
source to share
Discovered by workaround. You can see it there https://www.w3schools.com/code/tryit.asp?filename=FFPNFOV52YNW
It is enough to add "word-break: break-all"; and it starts working even without "width" only with "flex-basis".
But I'm still wondering why "word-wrap: break-word" only works with "width", and it takes "word-break: break-all;" to wrap words with flex stem only.
source to share