css - 在没有 Bootstrap 的情况下在文本内容上创建响应式 div

Question

我正在尝试使用图像、文本和 div 之间的间距创建响应式 div。 我有带间距和文本的 div，但它们不会调整更多文本的大小。 我正在努力实现这样的目标。

这个在一些 div 中有更多的文本，并且每个其他 div 也调整了大小。

这是我得到的:

.img{
 width:300px;
 height:100%;
}
.image { 

   position: relative; 
   width: 100%; /* for IE 6 */
}

h3{
   background-color: rgba(0, 0, 0, 0.5);

   position: absolute; 
   top: 105px;
   left: 0; 
   width: 300px; 
   color:white;
}

<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>sadasdsadsadsadsadsadasdasdsadsadsadsadas</h2>

</div>

我需要 div 来调整文本的大小并覆盖它的底部。 目前我正在使用 < br > 中断文本，这不是我的目标。

Answer 1

尝试 word-wrap: break-word; h3 属性

h3{
    word-wrap: break-word;
}

希望这有帮助..