如何在包装html中获取内部html

Question

编辑 截图

我想要创建一个投资组合页面。我的问题是内部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;
}