css - 当父级高度改变时，Webkit line clamp 省略号消失

Question

我正在使用 webkit line-clamp 向标题添加省略号。悬停时，会应用一个过渡来更改父容器的高度以显示其他文本。

省略号在页面加载时出现，但在悬停时消失。

参见 https://codepen.io/depiction/pen/QaQBNq .部分代码如下。

.card {
background: rgb(77, 90, 112);
font-family: Arial;
height: 250px;
width: 250px;
padding: 15px;
position: relative;

.content {
    position: absolute;
    bottom: 15px;
    width: calc(100% - 32px);
    z-index: 1;
}

    .location {
        color: #fff;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1px;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    h3 {
        @include multi-line-ellipis($font-size: 14px, $line-height: 1.5, $lines-to-show: 2, $transparent-bg: "true");
        color: #fff;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: 0.25px;
        margin: 0 0 5px 0;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85);
    }

.view-content {
    display: block;
    overflow: hidden;
    max-height: 0;
    position: relative;
    transition: max-height 250ms ease-out;

    a {
    color: #fff;
    display: inline-block;
    margin-top: 30px;
    text-transform: uppercase;

    &:hover {
        text-decoration: none;
    }
    }
}

&:hover {
    &:after {
    background: rgba(0, 0, 0, .4);
    }

    .view-content {
    max-height: 65px;
    transition: all 250ms ease-in;
    }
}
}

<div class="card">
<div class="content">
    <p class="location">Chicago, IL</p>
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor ultricies consequat. </h3>

    <div class="view-content">
    <hr />
    <a class="outlined">View Project</a>
    </div>
</div>
</div>

Answer 1

我最终通过将 .view-conent 的位置更改为绝对位置并调整悬停时的填充找到了解决方法。

修改后的代码如下。有关完成的示例，请参阅 https://codepen.io/depiction/pen/PERpvx

.content {
    transition: padding 250ms ease-out;
}

.view-content {
    bottom: 0;
    position: absolute;
}

&:hover {
    .content {
        padding-bottom: 65px;
        transition: all 250ms ease-in;
    }

    .view-content {
        max-height: 65px;
        transition: all 250ms ease-in;
    }
}