纯粹的CSS，使字体大小响应基于dynamic数量的字符
我知道这可以很容易地用Javascript解决，但我只对纯粹的CSS解决scheme感兴趣。
我想要一种dynamic调整文本大小的方法，使它始终适合固定的div。 这里是示例标记：
<div style="width: 200px; height: 1em; overflow: hidden;"> <p>Some sample dynamic amount of text here</p> </div> 我在想，也许这可能是通过在ems中指定容器的宽度，并获取字体大小来inheritance该值？
我刚刚发现，这是可能的使用大众的单位。 它们是与设置视口宽度相关的单位。 有一些缺点，如缺乏传统的浏览器支持，但这绝对是要认真考虑使用的东西。 另外，您仍然可以为旧版浏览器提供回退function，例如：
p { font-size: 30px; font-size: 3.5vw; }
http://css-tricks.com/viewport-sized-typography/和https://medium.com/design-ux/66bddb327bb1
CSS3支持与视图端口相关的新维度。 但是这在android <4.4中不起作用
- 3.2vw =视口宽度的3.2％
- 3.2vh =视口高度的3.2％
- 3.2vmin = 3.2vw或3.2vh更小
-
3.2vmax = 3.2vw或3.2vh更大
body { font-size: 3.2vw; }
看到css-tricks.com / ….也看看caniuse.com / ….
要么
使用媒体查询。最简单的方法是使用％或em的维度。 只要改变基础字体大小，一切都会改变。
@media (max-width: @screen-xs) { body{font-size: 10px;} } @media (max-width: @screen-sm) { body{font-size: 14px;} } h5{ font-size: 1.4em; }
使用％或em的尺寸。 只要改变基础字体大小，一切都会改变。 在之前的版本中，您可以每次更改正文字体而不是h1，或者将字体大小设置为设备的默认字体，然后全部放在em
请参阅kyleschaeffer.com / ….有关em，px和％
唯一的方法可能是为不同的屏幕尺寸设置不同的宽度，但这种方法是非常不准确的，你应该使用js解决scheme。
h1 { font-size: 20px; } @media all and (max-device-width: 720px){ h1 { font-size: 18px; } } @media all and (max-device-width: 640px){ h1 { font-size: 16px; } } @media all and (max-device-width: 320px){ h1 { font-size: 12px; } }
我知道我正在安慰一个长期的问题，但我有同样的问题，我想补充一些东西。 请不要因为这个而禁止我，我觉得这足以certificate这个答案的正确性，如果需要，我会删除。 @约瑟夫·西尔伯是错误的，编码所有的可能性实际上是一个可行的方法来做到这一点。 原因是因为实际上没有无限的可能性。 那么，从技术上来说，有99％的访问者会使用标准的分辨率。 这对于手机来说是双重的（响应式网页devise的主要原因），因为大多数移动操作系统都是在全屏幕下运行应用程序，而不需要调整窗口大小。
而且，因为滚动条的缘故，高度几乎是毫不相关的（到了一定程度，我会立即离开一个长度超过4或5英尺的网页，但是这大部分都是这样），所以你只需要担心宽度。 实际上，您需要编码的唯一宽度如下：240,320,480（对于较旧的iThings），640,800,1024,1280,1440,1600,1920,2048,2560。甚至不打扰4K，它会膨胀你的图像太多，2560尺寸拉伸到100％的宽度看起来就好4k显示器（我testing过）。 另外，不要像以前的海报build议的720（720×480）。 它的分辨率几乎完全由数码相机使用，即使那时也很less见。
如果有人使用一个奇特的解决scheme，几乎所有在过去15年制作的渲染器都会下滑，所以如果某个人的屏幕宽度是这样的话。 1100，它会去加载1024的CSS规则，你的网站不应该中断。 通过尝试创build一个不需要的响应规则来解决exception分辨率的问题，并且需要按像素编码每个可能的设置的想法是荒谬的，除非有人使用Web浏览器，以至于您的网站可能不会加载无论如何。
您可能对calc方法感兴趣：
font-size: calc(4vw + 4vh + 2vmin);
完成。 调整值，直到符合你的口味。
资料来源： https : //codepen.io/CrocoDillon/pen/fBJxu
正如许多人在@ DMTinter的post中提到的那样，OP在询问字符数量（“数量”）的变化。 他也在问CSS，但正如@Alexander指出的那样，“只有CSS才是可能的”。 据我所知，这个时候似乎是真的，所以人们想知道下一个最好的事情似乎也是合乎逻辑的。
我对此并不特别自豪，但确实有效。 看起来像是过多的代码来完成它。 这是核心：
function fitText(el){ var text = el.text(); var fsize = parseInt(el.css('font-size')); var measured = measureText(text, fsize); if (measured.width > el.width()){ console.log('reducing'); while(true){ fsize = parseInt(el.css('font-size')); var m = measureText(text, fsize ); if(m.width > el.width()){ el.css('font-size', --fsize + 'px'); } else{ break; } } } else if (measured.width < el.width()){ console.log('increasing'); while(true){ fsize = parseInt(el.css('font-size')); var m = measureText(text, fsize); if(m.width < el.width()-4){ // not sure why -4 is needed (often) el.css('font-size', ++fsize + 'px'); } else{ break; } } } }
这里是一个JS Bin： http : //jsbin.com/pidavon/edit?html,css, js,console, output
请build议可能的改进（我不是真的有兴趣使用canvas来衡量文字…似乎太多的开销（？））。
感谢@Pete的measureText函数： https ://stackoverflow.com/a/4032497/442665
