wrapping text in flexbox - css

Question

is it possible to wrap text in flex within a fixed width container?
so it looks like
img username added
you as a friend
rather than
user added
img name you as
a
friend
I can do this if the image and a were separate, but since they both link to the same thing, I wanna see if it can be done in the same tag.
ul {
width: 150px;
height: 300px;
border: solid 1px #000;
}
li {
display: flex;
align-items: center;
justify-content: center;
}
li img {
width: 25px;
height: 25px;
}
li a {
display: flex;
align-items: center;
text-decoration: none;
}
li span {
margin: 0 8px;
}
<ul>
<li>
<a href="https://placeholder.com">
<img src="http://via.placeholder.com/350x150"> <span> Username </span>
</a>
<p> added you as a friend</p>
</li>
</ul>

Answer 1

ul {
width: 150px;
height: 300px;
border: solid 1px #000;
padding: 5px;
}
li {
display: flex;
align-items: center;
justify-content: center;
}
li img {
width: 25px;
height: 25px;
}
li a {
display: flex;
align-items: center;
text-decoration: none;
}
li span {
margin: 0 8px;
}
<ul>
<li>
<a href="https://placeholder.com">
<img src="http://via.placeholder.com/350x150"> <span> Username </span>
</a>
<p> added you as a friend</p>
</li>
</ul>
Maybe the flex-wrap property would be useful in your case. Check this link for more information
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap