Responsive text across devices - html

Question

I am working on the list of artists page of my lyrics website (a side project of mine). Here is what I currently have:
Notice how some artist names are long and so wrap onto two lines, and pushing my artist name block (the black background) up.
CODE
Here is the HTML markup:
<div class="row artists">
<div class="col-md-2 col-6">
<div class="artist-card">
<div class="artist-image">
<img src="http://placehold.it/200x200" alt="Rihanna" />
</div>
<div class="artist-info">
<div class="artist-name">
<h2>Rihanna</h2>
</div>
</div>
</div>
</div><!-- .artist-card -->
<!-- more artist cards go here -->
</div><!-- .artists -->
And here is the Sass styles:
$artist-card-background-color: #bdbbb0;
.artist-card {
position: relative;
background-color: $artist-card-background-color;
border: none;
border-radius: 2px;
margin-bottom: 15px;
cursor: pointer;
.artist-image {
img {
width: 100%;
}
}
.artist-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
.artist-name {
h2 {
margin: 0;
color: #fff;
padding: 10px 15px;
}
}
}
}
I have also created a Codepen to allow you guys to experiment with the cards and how they currently behave across various viewports.
Question
What is the cleanest way I can make the titles legible (readable), but also have the same height no matter what the viewport size is?

Answer 1

Alternative 1
Truncate the text if it exceeds the width.
Add this css to the H2:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Alternative 2
Use something like http://fittextjs.com/ or http://simplefocus.com/flowtype to change the font-size dynamically based on its length.
Alternative 3
Combine the 2 above, truncate the text only when the text gets to small to read.