Question

是否可以自动调整字体大小以缩放动态线条，使其始终为100％的容器，无论您有什么文字？

示例和代码：

HTML

<body>
  <div class="container">
    <div class="text-block">
      <h1>Scale to 100% of text-block without wrapping</h1>
    </div>

    <h3>Desired outcome:</h3>
    <div class="text-block2">
      <h1>Scale to 100% of text-block without wrapping</h1>
    </div>
  </div>
</body>

CSS

.text-block {
  border: 2px solid #000;
  width: 400px;
  padding: 20px 30px;
  margin: 50px auto;
}
.text-block2 {
  border: 2px solid #000;
  width: 400px;
  padding: 20px 30px;
  margin: 20px auto;
}
h1 {
  font-family: arial, sans-serif;
}
.text-block2 h1 {
  font-size: 18.65px;
}
h3 {
  font-weight: 500;
  font-family: arial, sans-serif;
  text-align: center;
}

https://codepen.io/sharpdesigner/pen/NYpKJm

这不是链接问题的重复。我不是问如何根据容器宽度缩放字体大小，我问的是如何缩放整个h1文本以便它不会包装。

我找到的最佳答案来自评论，它使用的是FitText。使用工作示例更新了Codepen。

调整文本大小以适应宽度？

0 个答案: