html - 打破 h2 标题而不是移动图像

Question

所以我的网站上有一个框，右边有一个标题和一张图片。问题是当屏幕宽度太小时图像会被下推。相反，我想要的是标题换行。

我试过在 h2 上使用 maxwidth，以及其他各种显示、宽度和位置选项，但我无法让它工作。我觉得应该有一个简单的解决方案，但我一直没能找到。

HTML

<div class="projects-container">
     <h2>Title that gets too long</h2><img src="img/ddicon.jpg" width="30px">
     <div id="website">
       <p>I like to build websites, I would like to be better at it. So then this happened.</p>
     </div>
</div>

CSS

.projects-container {
  border: 5px solid black;
  border-radius: 20px;
  padding: 10px;
  margin-bottom: 20px;
}

.projects-container > h2 {
  margin: 5px 0px;
  display: inline;
}

.projects-container > img {
  float: right;
}

Answer 1

您需要进行 2 处简单的更改。

1- 地点 <img>首先在 HTML 中。

<div class="projects-container">
  <img src="img/ddicon.jpg" width="30px">
  <h2>Title that gets too long</h2>
</div>

2- 删除 display: inline并添加 overflow: hidden :

.projects-container > h2 {
  margin: 5px 0;
  overflow: hidden;
}

当你使用 float在子元素上，所以不要忘记设置父元素的布局。有多种设置布局的方法。例如:

.projects-container {
  overflow: hidden;
}

或者

.projects-container:after {
  display: block;
  clear: both;
  content: '';
}

.projects-container {
  border: 5px solid black;
  border-radius: 20px;
  padding: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.projects-container > h2 {
  margin: 5px 0px;
  overflow: hidden;
}

.projects-container > img {
  float: right;
}

<div class="projects-container">
    <img src="img/ddicon.jpg" width="30px">
     <h2>Title that gets too long</h2>
     <div id="website">
       <p>I like to build websites, I would like to be better at it. So then this happened.</p>
     </div>
</div>