使用flexbox打破文本

Question

我希望我的代码在此代码段中执行它正在执行的操作，但在我的浏览器中，它会显示在图片中。我认为这是导致此问题的flexbox。任何人都知道为什么会这样，以及如何解决它？

我已经检查过它是否是其他类的任何东西，但是这个div与其他div及其类完全分开

＆＃13;

＆＃13;

.activity-snippets {
  display: flex;
}

.activity-post-link {
  height: 215px;
  width: 33.33333333%;
  padding-right: 12px;
  padding-left: 12px;
  flex-grow: 0;
}

.activity-post-link img {
  max-width: 100%;
}

.activity-post-link a {
  text-decoration: none;
}

＆＃13;

  <div class="activity-snippets">

    <div class="activity-post-link">
      <a>
        <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
        <h2>
          My Girl's Cave for $55
        </h2>
        </a>
    </div>


    <div class="activity-post-link">
      <a>
        <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
          <h2>
            Turning a French Door Into a Shower Wall.
          </h2>
      </a>
    </div>


    <div class="activity-post-link">
      <a>
        <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
        <h2>
          LOVE SHELF
        </h2>
      </a>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果代码段看起来不错但实际的完整代码没有，那么代码中必须有其他内容阻止文本换行。

看起来您的弹性项目的大小正确但文字溢出。检查您的完整代码中的任何位置是否有white-space: nowrap;个应用于这些h2。