纯CSS使字体大小响应基于动态字符数量 [英] Pure CSS to make font-size responsive based on dynamic amount of characters

问题描述

我知道这可以很容易地用Javascript解决，但我只对纯CSS解决方案感兴趣。

I know that this could be solved fairly easily with Javascript, but I'm only interested in a pure CSS solution.

我想要一种动态调整文本大小的方法，以便它始终适合固定的div。以下是示例标记：

I want a way to dynamically resize text so that it always fits into a fixed div. Here is the sample markup:

<div style="width: 200px; height: 1em; overflow: hidden;">
  <p>Some sample dynamic amount of text here</p>
</div>

我在想，也许这可能是通过指定容器在ems中的宽度，并让字体大小继承该值？

I was thinking that maybe this could be possible by specifying the width of the container in ems, and getting the font-size to inherit that value?

推荐答案

我刚刚发现，这是可能使用大众单位。它们是与设置视口宽度相关联的单位。有一些缺点，如缺乏遗留的浏览器支持，但这绝对是一个认真考虑使用的东西。此外，您仍然可以为旧版浏览器提供后备工具，例如：

I just found out that this is possible using VW units. They're the units associated with setting the viewport width. There are some drawbacks, such as lack of legacy browser support, but this is definitely something to seriously consider using. Plus you can still provide fallbacks for older browsers like so:

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/
和
https://medium.com/design-ux/66bddb327bb1

这篇关于纯CSS使字体大小响应基于动态字符数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！