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

2023-02-20 18:12:27 +08:00
 qsnow6
我想要实现一个标题，在不超过其父元素的 width 的情况下，自动拉伸其大小，以填宽整个容器。
例如:字太多了，就自动缩小；字太少了就自动放大。类似等比例缩放。
993 次点击
所在节点    问与答
3 条回复
noe132
2023-02-20 18:24:33 +08:00
给字体设置一个比较大的 px 值，设置成绝对定位且不换行，获取这一段字的长度。然后监听容器大小，根据容器宽度设置一个 transform scale 。
b821025551b
2023-02-20 18:47:13 +08:00
<body>
<div class="container">
<h1>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h1>
</div>
</body>
<style>
.container h1 {
font-size: 100px;
font-size: clamp(1px, 4vw, 540px);
}
</style>
cheese
2023-02-20 19:39:58 +08:00
https://www.zhangxinxu.com/wordpress/2018/03/svg-text-font-size-auto-scale/

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/917714

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX