On my blog, the post titles are displayed in a div with a video playing in the background. The length of the title varies, ranging from 2 words to over 20 words. When the title is too long, it may overflow from its parent container where the video is playing.
I don't want to cut off the overflowing text or use scrollbars or ellipses "...". What I need is a solution that dynamically resizes the font if the text overflows, ensuring it fits perfectly within its parent div regardless of the viewport size.
For reference, here is the code: https://codepen.io/anon/pen/QgBZqd
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>SINEMACERA</title>
...
</head>
<body>
...
CSS
body {
background: black;
color:white;
font-family: Cabin;
}
...
.container:nth-of-type(2) {
padding-bottom: 1%;
}
JS
$(".btn-primary").click(function() {
...
});
...