Can text be wrapped in flex within a fixed width container?
For example:
img username added
you as a friend
Instead of:
user added
img name you as
a
friend
I am able to achieve this if the image and 'a' were separate, but since they both lead to the same thing, I want to know 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>