調整包含文本的div的大小

Question

在此處查看示例。 http://jsfiddle.net/y638o46h/1/ （請看最后一張圖片）

我正在嘗試在圖像上添加文本，但是如果行數超過了包含div的高度，則使用我的方法，文本會溢出。是否有一種方法可以根據行數調整div的大小。

<div class="relatedposts">
  <div class="relatedthumb">
     <img src="img1" >
        <h3 class="justin-cover">Lets make this work</h3>
  </div>
  <div class="relatedthumb">
     <img src="img2" >
         <h3 class="justin-cover">Lets make this work</h3>
  </div>
</div>


 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   }
  .relatedposts {
  display:table; 
  width:1024px;font-size: 0;
  /* fix inline gap */
  margin: 0 auto;
  }
  .relatedthumb {
  float: left;
  margin-left:5px;
  position: relative;
  margin-bottom:10px;
  }
 .relatedthumb img {
  text-align:center;
  }
 .justin-cover {
 color: #fff;
 font-size: 30px;
 font-weight: 500;
 height: 30%;
 width: 100%;
 position: absolute;
 bottom: 0;
 left:0;
 background: rgba(0,0,0,0.5);
 padding: 10px;
 transition: all 0.5s;
 }

Answer 1

改變這個

.justin-cover {
    ...
    height: 30%;
    ...
}

對此

.justin-cover {
    ...
    min-height: 30%;
    max-height: 100%; // Add this one too
    ...
}

Answer 2

如果可以接受，則可以設置溢出屬性。 溢出：汽車;