Css 边框 animation 移动端文本溢出问题

Question

I'm creating heading border animation effect that expand left and bottom border whenever header element came into viewport.

 (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>

but in mobile view or small screen text overflow's the bottom border, is there any way I can fit the text top of bottom line and right to left line. see the pictures

Problem:

text overflow issue

Expected behavior:

expected output

Answer 1

Your issue comes from your max-height: 2em; on your .text element: you are containing the max height of your element, but your text need more space when screen is smaller.

So you can remove this style property, or use @media queries to change css behavior for smaller devices like:

@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>

Answer 2

Add display: inline-table to .custom-heading.text . Like that:

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

After this edit, the indents between the text and lines will be uniform .

 (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>