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

我有一个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使用该魔术：

font size:calc（[最小大小]+（[最大大小]-[最小大小]）*（（100vw-[最小视口宽度]/（[最大视口宽度]-[最小视口宽度]））


#有问题的标题{
/*字体大小：计算（[最小大小]+（[最大大小]-[最小大小]）*（（100vw-[最小视口宽度]/（[最大视口宽度]-[最小视口宽度]））*/
字体大小：calc（14px+（26-14）*（（100vw-300px）/（1600-300））；
}
Lorem ipsum dolor sit amet，Concetetur adipiscing Elite
您可以使用纯CSS使用该魔术：

font size:calc（[最小大小]+（[最大大小]-[最小大小]）*（（100vw-[最小视口宽度]/（[最大视口宽度]-[最小视口宽度]））


#有问题的标题{
/*字体大小：计算（[最小大小]+（[最大大小]-[最小大小]）*（（100vw-[最小视口宽度]/（[最大视口宽度]-[最小视口宽度]））*/
字体大小：calc（14px+（26-14）*（（100vw-300px）/（1600-300））；
}
Lorem ipsum dolor sit amet，concetetur adipising elit
您需要使用Javascript控制字体大小样式。实际上，只需获取
{{show.title}}
值并检查它包含多少个字符。如果该数量大于您的任意限制，请应用较小字体大小的CSS样式。您可能需要使用Javascript控制字体大小样式。实际上，只需获取
{{show.title}}
值并检查它包含多少个字符。如果该数量大于您的任意限制，请应用较小字体大小的CSS样式。可能的重复看看！这是一个很好的CSS技巧。我在这里看到的唯一问题是，这将有效地消除所有卡片上的任何常见字体大小样式。虽然这不是一个大问题，但我可以看出在某些情况下这是相当痛苦的。@Marcbose我不明白你的意思？它可以与任何CSS选择器一起使用，这样你就可以选择想要的元素。对，只是指出上面应用它的方式中的缺陷。在本例中，通过css id引用它可能是一个好主意？id或类似
.text fluid{/*…*/}
。有很多方法可以做到这一点。@Lissy谢谢！我认为不需要回退，
calc
在95%的时间内有效。看见如果
calc
不受支持，将分配默认的
h1
大小。请看！这是一个很好的CSS技巧。我在这里看到的唯一问题是，这将有效地消除所有卡片上的任何常见字体大小样式。虽然这不是一个大问题，但我可以看出在某些情况下这是相当痛苦的。@Marcbose我不明白你的意思？它可以与任何CSS选择器一起使用，这样你就可以选择想要的元素。对，只是指出上面应用它的方式中的缺陷。在本例中，通过css id引用它可能是一个好主意？id或类似
.text fluid{/*…*/}
。有很多方法可以做到这一点。@Lissy谢谢！我认为不需要回退，
calc
在95%的时间内有效。看见如果不支持
calc
，将分配默认的
h1
大小。
.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;
}