当文本到达div的末尾时，使字体大小变小？

Question

我有一个div，里面有标题文字。对于某些标题，文本可能会很长，然后放到另一行，如下所示：

这是我要降低的文字，因为它会转到新的一行。

卡片HTML：

    <div class="card show-card">

                <a href="/theatresarniashow/{{show.show_slug}}" title="">
                  <div class="card-image">
                    <figure class="image is-4by3">
                      <img data-src="{{show.featured_image.url}}" alt="Thumbnail image for {{show.title}}" class="card-image-img owl-lazy">
                    </figure>
                  </div>
                </a>
<div class="card-content">



          <a href="/theatresarniashow/{{show.show_slug}}" title=""><h2 class="card-show-title">{{show.title}}</h2></a>

          <a href="/show/{{show.show_slug}}" title=""><h2 class="card-show-title">{{show.title}}</h2></a>

        <p class="card-show-date">{{show.starting_date}}</p>
        <p class="card-show-genre">{{show.genre}}</p>
      </div>
    </div>

CSS：

.card-show-title {
  /* Show Title Can be wr: */
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;

  color: #000000;
  letter-spacing: -0.16px;
  font-weight: bold;
}

.show-card {
  border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  -webkit-border-radius: 8px 8px 8px 8px;
  border: 0px solid #000000;
}

Answer 1

你可以使用纯粹的CSS使用这个神奇的技巧来做到这一点：

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

＆＃13;

＆＃13;

#problematic-title {
  /* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

＆＃13;

<h1 id="problematic-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>

＆＃13;

＆＃13;

＆＃13;

请参阅：https://css-tricks.com/snippets/css/fluid-typography/