JSFiddle - React, Tailwind, and code Playground

by kpagcha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="cover">
  <div id="page-header">
    <div class="container">
        <h1 class="title">This Is A Very Long Title That Overflows Vertically</h1>
    </div>
  </div>
</div>

CSS

#cover {
  height: calc(100vh - 40px);
	overflow: hidden;
  background: grey;
  display: flex;
}

#page-header {
  display: flex;
  align-items: end;
	width: 100%;
	height: 100%;
}

.container {
	max-width: 300px;
  height: 100%;
  width: 100%;
}

.title {
	font-family: Nunito;
	font-size: 8vw;
	font-weight: 900;
	color: #fff;
	margin-bottom: 100px;
  width: 100%;
  height: 100%;
}

JavaScript

/** Checks if an element overflows. **/
let isOverflown = e => e.offsetWidth < e.scrollWidth || e.offsetHeight < e.scrollHeight;

/** Resizes an element's font size until it no longer overflows. **/
let resizeFont = $e => {
    let fontSize = parseInt($e.css('font-size'));
    const parent = $e.parent()[0];
    while (fontSize > 0 && isOverflown(parent)) $e.css('font-size', --fontSize + 'px');
    $e.css({'display': 'flex', 'align-items': 'flex-end'});
}

resizeFont($('.title'));