如何獲得內部HTML在包裝HTML

Question

編輯SCREENSHOT

我想創建一個投資組合頁面。我的問題是內部HTML

<div class="box desktop-3 tablet-3 tablet-ls-3 mobile-3"> 
       <a class="modulText" href='#module'> 
        <img src="../img/placeholder.png" /> 
        <div class="label"> 
         <div class="label-text"> 
          <div class="text-title"> 
           <%= title %> 
          </div> 
          <span class="text-category">Category</span> 
         </div> 
        </div> 
       </a> 
     </div> 

的CSS是這樣的：

desktop-3 { 
    width: 25%; 
} 

.box { 
    min-height: 282px; 
    padding: 10px; 
    float: left; 
} 

img { 
    max-width: 100%; 
    max-height: 100%; 
    z-index: 1; 
} 

.label { 
    background-color: rgba(25, 25, 25, 0.5); 
    width: 100%; 
    bottom: 0; 
} 

.label-text { 
    color:#fff; 
    position: relative; 
    z-index:500; 
    padding:5px 8px; 
} 

text-category { 
    display: block; 
    font-size: 9px; 
} 

儘快text-title不會在一個盒子適合label高度的變化，我不能夠證明一排4個盒子。我只想讓box元素中的label變得不穩定。如果text-title是廣泛的，我希望整個標籤在box以內變高，而不是變得更高。 jFiddle

感謝的建議

Answer 1

從你的截圖，我理解的是，第二個標題是更長的時間。這打破了佈局。因此，您可能需要將以下CSS添加到text-title以避免設計損壞。下面的代碼將保持標題在一行中。

.text-title { 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 
width: 400px; 
}