Как получить внутренний HTML в обертку HTML

Question

EDIT 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 коробки в одной строке. Я просто хочу иметь label в элементе box. Если text-title будет широко распространен, я хочу, чтобы вся этикетка становилась выше внутри box, а не увеличивалась. jFiddle

спасибо за совет

Answer 1

Из скриншота, я понял, что второе название больше. Это нарушает макет. Таким образом, вы можете добавить ниже CSS к text-title, чтобы избежать поломки дизайна. Следующий код сохранит заголовок в одной строке.

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