纯粹的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中不起作用

  1. 3.2vw =视口宽度的3.2%
  2. 3.2vh =视口高度的3.2%
  3. 3.2vmin = 3.2vw或3.2vh更小
  4. 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