Member Avatar for Ryan_42

Is it possible to autofit a generated text inside a div? I have a button that creates a text inside a div element using javascript. The problem is there are some long text that are generated which overlaps the div that contains it. Is there anyway to auto fit like that?

this is my html code : 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Liu+Jian+Mao+Cao&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="thiscss/randomqoutes.css">
    <title>Document</title>
</head>

<body>
<div class="container">
 <div class="overlaycontainer">
            <button id="closebtn" class="close">+</button>
            <div class="qoutetextwrapper">
                <div class="qoutetext"> 
                    <h3 id="theqoute" class="qoute">TEST Qoute QOUTE TEST</h3> // this is the div where the generated text will be
                </div>
                <button id="getbtn" class="moreBtn">Get More Qoute</button> // this is the button that generates text
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="javascript/randomqoutes.js"></script>

</html>

Here is my css file 

.container {
    display: flex;
}

.overlaycontainer {
        position: absolute;
        padding: 100px;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.95;
        display: none;
        left: 0;
        top: 0;
        transition: 1s ease-in;
    }

    .qoutetextwrapper {
        position: relative;
        left: 30vw;
        top: 12vh;
    }

    .qoutetext {
        width: 60vw;
        height: 40vh;
        border-top: 1px dotted #ED8F20;
        border-bottom: 1px dotted #ED8F20;
    }

    .moreBtn {
        font-weight: 800;
        color: #ED8F20;
        margin-top: 12px;
        height: 2.5vh;
        background: none;
        border: 1px dotted #ED8F20;
        text-transform: uppercase;
        padding: 1.1rem;
        line-height: .1rem;
        margin-left: 51vw;
    }

    .moreBtn:hover {
        border: #ED8F20;
        background: #ED8F20;
        color: rgba(8, 8, 8, 0.973);
    }

    .close {
        padding: 5px;
        font-size: 70px;
        border: none;
        color: rgb(49, 47, 47);
        background: none;
        position: absolute;
        left: 88%;
        bottom: 93.2%;
        transform: rotate(45deg);
    }

    .qoute {
        color: wheat;
        font-family: 'Open Sans', sans-serif;
        font-size: 3.5rem;
        font-weight: 600;
        font-stretch: extra-expanded;
    }

Here is my javascript file:

let textqoutes = [{
        "qoute": "If you have been brutally broken but still have the courage to be gentle to other living beings, then you’re a badass with a heart of an angel.",
        "author": " - Keanu Reeves"
    },

    {
        "qoute": "The greatest glory in living lies not in never falling, but in rising every time we fall.",
        "author": " - Nelson Mandela"
    }
]

const qoutebtn = document.getElementById('getbtn');
const _qoute = document.getElementById('theqoute');
const _author = document.getElementById('theauthor');

qoutebtn.addEventListener('click', getqoute);

function getqoute() {
    let indexnum = Math.floor(Math.random() * textqoutes.length);
    _qoute.innerHTML = textqoutes[indexnum].qoute;
}
  • 2 Contributors
  • 1 Reply
  • 277 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by AndreRet

Dani AI

Generated

Short answer: yes — there are several ways to keep programmatically injected text from overflowing. Which one to choose depends on the UX you want (scrollbars, truncation, or automatic resizing). is already on the right track; ’s overflow suggestion is the fastest fix if scrollbars are acceptable. Below are progressive alternatives that avoid changing layout or adding scrollbars unless you want them.

A CSS-first fix (no JS): allow normal wrapping and hyphenation so long words break instead of overflowing. Ensure the page has a language set (hyphenation needs it) and use overflow-wrap/white-space/hyphens so long words break cleanly.

/* allow wrapping and hyphenation */
.quote-container h3 {
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
  box-sizing: border-box;
}

If you prefer the text to scale down instead of wrapping, use responsive font sizing with clamp() so the font reduces on smaller viewports without JS:

.quote-container h3 {
  font-size: clamp(16px, 2.6vw, 36px);
  line-height: 1.1;
  text-align: center;
}

When CSS alone isn’t enough (for unpredictable lengths), use a small JS “shrink-to-fit” routine that reduces the element’s font-size until it fits, stopping at a sensible minimum for legibility:

function fitTextToBox(el, minPx = 12) {
  const box = el.parentElement;
  let fs = parseFloat(getComputedStyle(el).fontSize);
  while ((el.scrollHeight > box.clientHeight || el.scrollWidth > box.clientWidth) && fs > minPx) {
    fs -= 1;
    el.style.fontSize = fs + "px";
  }
}

/* after inserting text:
   targetEl.textContent = generatedText;
   fitTextToBox(targetEl, 14);
*/

Recommendation: try CSS wrapping/hyphenation first (simplest, best for accessibility), then clamp() for layout-consistent scaling, and use the JS shrinker only if you must guarantee no overflow for arbitrary content. Keep a readable minimum font-size and test on mobile.

Member Avatar for AndreRet

You can use the overflow property to either scroll or to auto depending on what will work for you -

.qoutetext {
        width: 60vw;
        height: 40vh;
        border-top: 1px dotted #ED8F20;
        border-bottom: 1px dotted #ED8F20;
        overflow: scroll;
        /*overflow: auto;*/
    }

This should fit the extra text to your div as required. an Example can be found HERE

Edited by AndreRet
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.