I have a requirement to show image with a text together on same column where they both share same width. By default, text size will exceed image size if text is big enough. I manage to solve the issue by giving max-width style to span with some javascript code. I wonder is there a way to solve this issue without some Javascript black magic?
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="d-flex flex-column align-items-center">
<!-- LONG ASS TEXT START -->
<span class="flex-grow-1 flex-shrink-1 text-break"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a nisi aliquet, tempus felis non, sollicitudin erat. Phasellus dapibus lobortis magna, at maximus dui tincidunt sit amet. Suspendisse fringilla gravida velit, id pharetra libero semper in. Proin in lacus dui. In ultricies suscipit tortor, vel pharetra arcu efficitur non. Donec sed quam tellus. Maecenas lacinia vehicula mauris, eget facilisis metus elementum ut. Aliquam ullamcorper nisl non nunc fermentum pellentesque. Sed at pretium ligula. Quisque sit amet metus porta, scelerisque ligula nec, vulputate tortor. Curabitur blandit, tellus efficitur sollicitudin imperdiet, risus quam molestie risus, a mattis orci mauris bibendum velit. Curabitur volutpat porttitor enim ut fringilla. Nunc sit amet odio bibendum, tempus nulla vulputate, cursus nisl. Praesent tincidunt turpis ac risus ultrices mollis. Phasellus ipsum arcu, pharetra ut lectus luctus, sollicitudin pretium purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sagittis maximus ex, in dapibus tellus rhoncus at. Etiam id vestibulum arcu. Aenean sed hendrerit dui, et vehicula mi. Donec posuere sapien ac bibendum lobortis. Phasellus dignissim tempus ante, id tincidunt dolor consequat ut. Morbi aliquam porttitor condimentum. Aenean auctor libero erat, pretium facilisis lacus pharetra id. Etiam ipsum enim, faucibus eu felis id, pharetra blandit lectus. Integer ut metus ac odio bibendum egestas. Suspendisse potenti. Aenean ut feugiat mi. Vestibulum commodo massa dolor, ut tincidunt diam posuere at. Ut quis vehicula nulla, in imperdiet erat. Duis sed eleifend magna. Donec vulputate, lectus vel convallis aliquam, odio justo semper odio, a vulputate ante mauris non nisl. Sed sollicitudin tortor sit amet porta vehicula. Fusce sodales lorem eu dolor sodales, eu scelerisque nisl imperdiet. Duis hendrerit ligula sed tellus finibus dignissim. Proin vitae nibh dictum lorem accumsan finibus sed quis est. In est metus, euismod aliquet posuere a, laoreet ut urna. Nullam nec mauris a metus blandit lobortis. Aenean sed volutpat dolor. Curabitur tristique ligula magna, non elementum orci suscipit rutrum. In efficitur tortor ut enim commodo, sed consequat lacus varius. Morbi lectus ante, suscipit nec metus egestas, iaculis semper nisi. Nam a faucibus arcu, sit amet blandit nulla. Ut leo risus, suscipit id rhoncus et, posuere vitae diam. Cras et porttitor nibh, vel ornare lacus. Etiam nec lectus nunc. Maecenas scelerisque purus sed ex gravida volutpat. Nam vehicula tortor diam, et eleifend orci maximus accumsan. Donec gravida turpis ut interdum rutrum. Phasellus non lobortis quam. Sed quis laoreet lectus. Curabitur eu faucibus massa. Fusce feugiat arcu nec ante ultricies vulputate. Mauris gravida finibus nisl. Fusce suscipit blandit erat nec gravida. Vivamus auctor dapibus augue, sit amet porttitor diam tempor eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque condimentum eleifend posuere. Aliquam porttitor odio a tincidunt varius. Proin id semper orci. Suspendisse potenti. Aliquam fringilla laoreet cursus. Vestibulum dictum urna in sem elementum, sed lacinia eros tincidunt. </span>
<!-- LONG ASS TEXT END -->
<!-- IMAGE START -->
<img src="https://www.englishclub.com/images/esl-exams/toeic_office.jpg" class="img-fluid" alt="..."></div>