With Bootstrap 4, I've set up a grid where the text in the right column on a phone might make the row taller. To address this issue, I've made the body 375px wide to simulate the scenario. What I want is for the row to maintain the size of the image and then use text-overflow: ellipsis to hide any overflowing text. How can I achieve this?
Here's my CSS and HTML:
.infoHeader {
text-transform: uppercase;
}
#posterCol {
max-width: 184px;
}
.movieDBImg {
border-radius: 4px;
}
body {
width: 375px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="flex-container" style="padding: 15px;">
<div class="row">
<div class="col" id="posterCol"><img class="movieDBImg" style="max-width: 154px;"
src="https://image.tmdb.org/t/p/w300/cezWGskPY5x7GaglTTRN4Fugfb8.jpg"></div>
<div class="col">
<div class="row text-muted infoHeader">Directors</div>
<div class="row">
Joss Whedon
</div>
<div class="row text-muted infoHeader">Genres</div>
<div class="row">
<p class="card-text">
Science Fiction,
Action,
Adventure</p>
</div>
<div class="row text-muted infoHeader">Cast</div>
<div class="row">
Robert Downey Jr.,
Chris Evans,
Mark Ruffalo,
Chris Hemsworth,
Scarlett Johansson,
Jeremy Renner,
Tom Hiddleston,
Clark Gregg,
Cobie Smulders,
Stellan Skarsgård</div>
</div>
</div>
</div>
</body>
</html>