手机中的Css边框动画文本溢出问题

Question

我正在创建标题边框动画效果，当标题元素进入视口时，它会扩展左边框和下边框。

(function () {
    var elements;
    var windowHeight;

    function init() {
        elements = document.querySelectorAll(".custom-heading");
        windowHeight = window.innerHeight;
    }

    function checkPosition() {
        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];
            var positionFromTop = elements[i].getBoundingClientRect().top;

            if (positionFromTop - windowHeight <= 0) {
                element.classList.add("ch-animate");
            }
        }
    }

    window.addEventListener("scroll", checkPosition);
    window.addEventListener("resize", init);

    init();
    checkPosition();
})();

.custom-heading {
    position: relative;
    height: auto;
    min-height: 100% !important;
}

.custom-heading .text {
    line-height: 1.5em;
    padding-left: 2rem;
    padding-bottom: 0.5rem;
    max-height: 2em;
}

.bh-line,
.vl-line {
    position: absolute;
    display: block;
    background-color: #d70522;
    transition: all 3s ease;
}

.bh-line {
    left: 0;
    bottom: 15%;
    height: 3px;
    width: 0%;
}

.vl-line {
    left: 1rem;
    bottom: -0.3rem;
    height: 0;
    width: 3px;
}

.custom-heading.ch-animate .bh-line {
    width: 100%;
}

.custom-heading.ch-animate .vl-line {
    height: 100%;
}

<div class="custom-heading">
    <span class="vl-line"></span>
    <h1 class="text">Lorem ipsum dolor sit</h1>
    <span class="bh-line"></span>
</div>

但是在移动视图或小屏幕文本溢出的底部边框中，有什么方法可以将文本放在底线的顶部和从右到左的线。看图片

问题：

text overflow issue

预期行为：

expected output

Answer 1

将display: inline-table 添加到.custom-heading .text。像这样：

.custom-heading .text {
    ...
    display: inline-table;
}

编辑后，文本和行之间的缩进将统一。

(function () {
    var elements;
    var windowHeight;

    function init() {
        elements = document.querySelectorAll(".custom-heading");
        windowHeight = window.innerHeight;
    }

    function checkPosition() {
        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];
            var positionFromTop = elements[i].getBoundingClientRect().top;

            if (positionFromTop - windowHeight <= 0) {
                element.classList.add("ch-animate");
            }
        }
    }

    window.addEventListener("scroll", checkPosition);
    window.addEventListener("resize", init);

    init();
    checkPosition();
})();

.custom-heading {
    position: relative;
    height: auto;
    min-height: 100% !important;
}

.custom-heading .text {
    line-height: 1.5em;
    padding-left: 2rem;
    padding-bottom: 0.5rem;
    max-height: 2em;
    display: inline-table;
}

.bh-line,
.vl-line {
    position: absolute;
    display: block;
    background-color: #d70522;
    transition: all 3s ease;
}

.bh-line {
    left: 0;
    bottom: 15%;
    height: 3px;
    width: 0%;
}

.vl-line {
    left: 1rem;
    bottom: -0.3rem;
    height: 0;
    width: 3px;
}

.custom-heading.ch-animate .bh-line {
    width: 100%;
}

.custom-heading.ch-animate .vl-line {
    height: 100%;
}

<div class="custom-heading">
    <span class="vl-line"></span>
    <h1 class="text">Lorem ipsum dolor sit</h1>
    <span class="bh-line"></span>
</div>

Answer 2

您的问题来自 .text 元素上的 max-height: 2em; ：您包含元素的最大高度，但是当屏幕较小时，您的文本需要更多空间。

因此您可以删除此样式属性，或使用@media 查询来更改较小设备的 css 行为，例如：

@media (max-width:576px) {
    .text {
        max-height: inherit;
    }
}

(function () {
    var elements;
    var windowHeight;

    function init() {
        elements = document.querySelectorAll(".custom-heading");
        windowHeight = window.innerHeight;
    }

    function checkPosition() {
        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];
            var positionFromTop = elements[i].getBoundingClientRect().top;

            if (positionFromTop - windowHeight <= 0) {
                element.classList.add("ch-animate");
            }
        }
    }

    window.addEventListener("scroll", checkPosition);
    window.addEventListener("resize", init);

    init();
    checkPosition();
})();

.custom-heading {
    position: relative;
    height: auto;
    min-height: 100% !important;
    width: 300px;
}

.custom-heading .text {
    line-height: 1.5em;
    padding-left: 2rem;
    padding-bottom: 0.5rem;
}

.bh-line,
.vl-line {
    position: absolute;
    display: block;
    background-color: #d70522;
    transition: all 3s ease;
}

.bh-line {
    left: 0;
    bottom: 15%;
    height: 3px;
    width: 0%;
}

.vl-line {
    left: 1rem;
    bottom: -0.3rem;
    height: 0;
    width: 3px;
}

.custom-heading.ch-animate .bh-line {
    width: 100%;
}

.custom-heading.ch-animate .vl-line {
    height: 100%;
}

<div class="custom-heading">
    <span class="vl-line"></span>
    <h1 class="text">Lorem ipsum dolor sit</h1>
    <span class="bh-line"></span>
</div>