css - 纯 CSS 根据动态字符数量使字体大小响应

Question

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

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

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

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

Answer 1

注意：此解决方案根据视口大小而不是内容量而变化

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

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

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

Answer 2

编辑：注意attr()它与css中的calc()相关。您将来也许可以实现它。

不幸的是，目前还没有唯一的 CSS 解决方案。这是我建议你做的。给你的元素一个标题属性。并使用文本溢出省略号来防止破坏设计并让用户知道那里有更多文本。

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

.

.

.

或者，如果您只想根据视口减小尺寸。CSS3支持与视口相关的新尺寸。

body {
   font-size: 3.2vw;
}

1. 3.2vw = 视口宽度的 3.2%
2. 3.2vh = 视口高度的 3.2%
3. 3.2vmin = 3.2vw 或 3.2vh 中的较小者
4. 3.2vmax = 3.2vw 或 3.2vh 中的较大者，请参阅css-tricks.com/....并查看caniuse.com/....

Answer 3

您可能对这种calc方法感兴趣：

font-size: calc(4vw + 4vh + 2vmin);

完毕。调整值直到符合您的口味。

来源：https ://codepen.io/CrocoDillon/pen/fBJxu

Answer 4

唯一的方法可能是为不同的屏幕尺寸设置不同的宽度，但是这种方法非常不准确，您应该使用 js 解决方案。

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;
    }
}

Answer 5

作为参考，非 CSS 解决方案：

下面是一些 JS，它根据容器中的文本长度重新调整字体大小。

Codepen代码稍作修改，但思路与以下相同：

function scaleFontSize(element) {
    var container = document.getElementById(element);

    // Reset font-size to 100% to begin
    container.style.fontSize = "100%";

    // Check if the text is wider than its container,
    // if so then reduce font-size
    if (container.scrollWidth > container.clientWidth) {
        container.style.fontSize = "70%";
    }
}

对我来说，当用户在下拉列表中进行选择时，我调用此函数，然后我的菜单中的 div 被填充（这是我出现动态文本的地方）。

    scaleFontSize("my_container_div");

此外，我还使用 CSS 省略号（“...”）来截断更长的文本，如下所示：

#my_container_div {
    width: 200px; /* width required for text-overflow to work */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

所以，最终：

• 短文本：例如“APPLES”

  完全渲染，漂亮的大字母。

• 长文本：例如“APPLES & ORANGES”

  通过上述 JS 缩放功能，缩小 70%。

• 超长文本：例如“APPLES & ORANGES & BANAN...”

  通过上面的 JS 缩放函数和 CSS 规则，缩小 70% 并用“...”省略号截断。

您还可以探索使用 CSS letter-spacing 来使文本更窄，同时保持相同的字体大小。

Answer 6

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

使用这个等式。

对于大于或小于 1440 和 768 的任何值，您可以给它一个静态值，或者应用相同的方法。

vw 解决方案的缺点是您无法设置缩放比例，例如屏幕分辨率为 1440 的 5vw 最终可能是 60px 字体大小，您的想法字体大小，但是当您将窗口宽度缩小到 768 时，它可能会结束12px，不是你想要的最小值。使用这种方法，您可以设置上边界和下边界，字体将在两者之间自行缩放。

Answer 7

正如@DMTinter 帖子的评论中提到的许多人所提到的那样，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 请提出可能的改进建议（我对使用画布测量文本并不感兴趣......似乎像太多的开销（？））。

感谢@Pete 提供 measureText 功能： https ://stackoverflow.com/a/4032497/442665

Answer 8

试试MartijnCuppens 的RFS（用于响应式字体大小）库，它可能会在 Bootstrap 中实现

Answer 9

此解决方案也可能有帮助：

$(document).ready(function () {
    $(window).resize(function() {
        if ($(window).width() < 600) {
            $('body').css('font-size', '2.8vw' );
        } else if ($(window).width() >= 600 && $(window).width() < 750) {
            $('body').css('font-size', '2.4vw');
        } 
         // and so on... (according to our needs)
        } else if ($(window).width() >= 1200) {
            $('body').css('font-size', '1.2vw');
        }
    }); 
  });

它对我很有效！

Answer 10

为什么不根据字符数在服务器端设置类？

    .NotMuchText {
        font-size: 20px;
    }

    .LotsOfText {
        font-size: 10px;
    }

我还想要一个非 JavaScript 解决方案，CSS 解决方案，并改用 PHP/CSS 解决方案。

Answer 11

如果在Bootstrap 4中从头开始

1. 转到https://bootstrap.build/app
2. 点击搜索模式
3. 搜索$enable-responsive-font-sizes并打开它。
4. 单击导出主题以保存您的自定义引导 CSS 文件。

Answer 12

好的，您的动态文本一定来自某个地方。就我而言，这看起来像：

<div class="large" :data-contentlength="Math.floor(item.name.length/7)">[[ item.name ]]</div>

和我的 CSS 类：

.large[data-contentlength="1"]{ font-size: 1.2em; }
.large[data-contentlength="2"]{ font-size: 1.1em; }
.large[data-contentlength="3"]{ font-size: 1.0em; }
.large[data-contentlength="4"]{ font-size: 0.9em; }
.large[data-contentlength="5"]{ font-size: 0.8em; }
.large[data-contentlength="6"]{ font-size: 0.7em; }
.large[data-contentlength="7"]{ font-size: 0.6em; }

我也有“非大”文本的类：

[data-length="1"]{ font-size: 1.00em; }
...

Answer 13

创建一个查找表，该表根据<div>.

const fontSizeLookupTable = () => {
  // lookup table looks like: [ '72px', ..., '32px', ..., '16px', ..., ]
  let a = [];
  // adjust this based on how many characters you expect in your <div>
  a.length = 32;
  // adjust the following ranges empirically
  a.fill( '72px' ,     );
  a.fill( '32px' , 4 , );
  a.fill( '16px' , 8 , );
  // add more ranges as necessary
  return a;
}

const computeFontSize = stringLength => {
  const table = fontSizeLookupTable();
  return stringLength < table.length ? table[stringLength] : '16px';
}

通过经验测试调整和调整所有参数。

Answer 14

我是这样使用的：

1 .style.fontSize = 15.6/(document.getElementById(" 2 ").innerHTML.length)+ 'vw'

其中：1 - 父 div Id 和2 - 带有我的文本的 div 的 Id