Question

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

所以它看起来像

img username added
    you as a friend

而不是

    user added
img name you as
         a
         friend

如果图像和a是分开的，我可以这样做，但由于它们都链接到同一个东西，我想看看它是否可以在同一个标签中完成。

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>

在您的情况下，flex-wrap属性可能会有用。请查看此链接以获取更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

在flexbox中包装文本

1 个答案: