CSS自适应-防止独立项

Question

我有这样的代码：

.user {
  display: inline;
  margin-right: 20px;
}

.username {
  margin-right: 10px;
  display: inline;
}

<div class="container">
   <div class="user">
         <img class="avatar" src="http://i.pravatar.cc/16" alt="">
    <div class="username">David James</div>
  </div>
   <div class="user user2">
         <img class="avatar" src="http://i.pravatar.cc/16" alt="">
    <div class="username">David Something James</div>
  </div>
</div>

像这样从大到小调整屏幕大小时： Please see the image 我不想看到第二个头像单独出现，我希望它和用户名一起转到新行。调整大小时，要求用户名逐字换行。

请帮助我。谢谢！

Answer 1

尝试显示：内联代码块；而不是内联的类用户。

.user {
   display: inline-block;
}

Answer 2

如果您不想单独看到头像，只需使用white-space：nowrap。

我希望下面的代码能帮助您...

.user {
    display: inline-block;
    max-width: 100%;
    margin-right: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    
}

.username {
  margin-right: 10px;
  display: inline;
}

<div class="container">
   <div class="user">
         <img class="avatar" src="http://i.pravatar.cc/16" alt="">
    <div class="username">David James</div>
  </div>
   <div class="user user2">
         <img class="avatar" src="http://i.pravatar.cc/16" alt="">
    <div class="username">David Something James</div>
  </div>
</div>

Answer 3

在容器类中，使用flex和flex-wrap。

它应该解决它。 ：）

.container {
  display: flex;
  flex-wrap: wrap;
}