如何确保 div 文本不会移动到新行，并且在窗口大小缩小时根据需要换行？

Question

我有一个 html，其中有一个图标、标题和摘要。标题的宽度应为

250px

，摘要的宽度应为

400px

。

随着移动设备上窗口尺寸的缩小，摘要将移至新行。但我不希望标题移动到新的一行。我希望标题保持在原来的位置，只是将文本换行以适应窗口大小。

所以基本上在移动设备上，图标和标题将彼此相邻，摘要将在它们下方。 我的 css 和 html 结构可以吗？

我尝试使用

word-break: break-word;

或

white-space: nowrap

但这些对我的场景都没有帮助。

这是我的 HTML 和 CSS

<div class="topic">
    <i class="fa-solid fa-water"></i>
    <h3 class="title">This is about Water</h3>
    <p class="summary">
        Why should I drink water? Water is vital to our health. 
        It plays a key role in many of our body's functions, including bringing nutrients to cells, 
        getting rid of wastes, protecting joints and organs, and maintaining body temperature. 
        Water should almost always be your go-to beverage.
    </p>
</div>

.topic {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 20px;
    width: 100%;
    padding: 10px;
 
    svg {
        color: #00FF00;
        font-weight: 600;
        font-size: 14px;
        width: 60px;
        height: 60px;
    }
 
    .title {
        width: 250px 
    }
 
    .summary {
        flex: 0 0 400px;
    }
    
    [class^='fa-'] {
        flex: 0 0 60px;
    }
}

Answer 1

在

width

div 上的

400px

下面添加固定

350px

为

.topic

的媒体查询，如下所示：

.topic {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 20px;
  width: 100%;
  padding: 10px;
  svg {
    color: #00FF00;
    font-weight: 600;
    font-size: 14px;
    width: 60px;
    height: 60px;
  }
  .title {
    width: 250px
  }
  .summary {
    flex: 0 0 400px;
  }
  [class^='fa-'] {
    flex: 0 0 60px;
  }
}
@media (max-width: 350px){
.topic{width: 400px}
}

<div class="topic">
  <i class="fa-solid fa-water"></i>
  <h3 class="title">This is about Water</h3>
  <p class="summary">
    Why should I drink water? Water is vital to our health. It plays a key role in many of our body's functions, including bringing nutrients to cells, getting rid of wastes, protecting joints and organs, and maintaining body temperature. Water should almost
    always be your go-to beverage.
  </p>
</div>