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
  • 263 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by AndreRet
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.