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