CSS 问题：如何限制一行文字，自动伸缩其字体大小，但是不能超过其父容器的宽度？

This topic created in 1221 days ago, the information mentioned may be changed or developed.

我想要实现一个标题，在不超过其父元素的 width 的情况下，自动拉伸其大小，以填宽整个容器。
例如:字太多了，就自动缩小；字太少了就自动放大。类似等比例缩放。

容器

自动

CSS

width

3 replies • 2023-02-20 19:39:58 +08:00

noe132

Feb 20, 2023

给字体设置一个比较大的 px 值，设置成绝对定位且不换行，获取这一段字的长度。然后监听容器大小，根据容器宽度设置一个 transform scale 。

b821025551b

Feb 20, 2023

<body>
<div class="container">
<h1>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h1>
</div>
</body>
<style>
.container h1 {
font-size: 100px;
font-size: clamp(1px, 4vw, 540px);
}
</style>

cheese

Feb 20, 2023

https://www.zhangxinxu.com/wordpress/2018/03/svg-text-font-size-auto-scale/