在flexbox中包装文字 [英] wrapping text in flexbox

问题描述

是否可以在固定宽度的容器中将文本以flex换行?

is it possible to wrap text in flex within a fixed width container?

看起来像

img username added
    you as a friend

而不是

    user added
img name you as
         a
         friend

如果图像和a是分开的，我可以执行此操作，但是由于它们都链接到同一事物，因此我想看看是否可以在同一标签中完成该操作.

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>

推荐答案

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>

在您的情况下，也许flex-wrap属性会很有用.检查此链接以获取更多信息 https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap

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

这篇关于在flexbox中包装文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！