跨设备的响应式文本

Question

我正在处理我的歌词网站（我的一个侧面项目）的艺术家页面列表。这是我现在拥有的：

注意一些艺术家的名字是如何长的，所以包裹在两行上，并推动我的艺术家名称块（黑色背景）。

CODE

以下是HTML标记：

<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 -->

这是Sass风格：

$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;
      }
    }
  }
}

我还创建了一个Codepen，让您可以尝试使用这些卡以及它们目前在各种视口中的行为。

问题

什么是最清晰的方法，我可以使标题清晰可读（可读），但无论视口大小是什么，它都具有相同的高度？

Answer 1

备选方案1

如果文本超出宽度，则截断文本。 将此CSS添加到H2：

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

备选方案2

使用http://fittextjs.com/或http://simplefocus.com/flowtype之类的内容根据字符长度动态更改字体大小。

备选方案3

结合上面的2，只有在文本变小才能阅读时才截断文本。