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;
    }
}

父级高度变化时，Webkit线夹省略号消失

1 个答案: