html - 跨设备响应文本

Question

我正在处理我的歌词网站(我的一个副元素)的艺术家列表页面。这是我目前拥有的:

请注意，有些艺术家的名字很长，因此可以分成两行，并将我的艺术家名字 block (黑色背景)向上推。

代码

这是 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让你们试验这些卡片以及它们当前在各种视口(viewport)中的行为。

问题

无论视口(viewport)大小如何，使标题清晰可读且高度相同的最简洁方法是什么？

Answer 1

备选方案 1

如果文本超出宽度，则将其截断。将此 css 添加到 H2:

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

备选方案 2

使用像 http://fittextjs.com/ 这样的东西或 http://simplefocus.com/flowtype根据其长度动态更改字体大小。

备选方案 3

结合上面的两个，只有当文本变小难以阅读时才截断文本。