这个解决方案也可能有帮助:

$(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');
        }
    }); 
  });

这对我很有效!

创建一个查找表，根据<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';
}

通过实证测试对所有参数进行调整和调优。

我是这样使用smth的:

1 .风格。fontSize = 15.6/(文档。

哪里:1 -父母div Id和2 - Id的div与我的文本

你的动态文本一定来自某个地方。在我的例子中，这看起来像:

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

编辑: 当attr()在所有浏览器中都可用时，这变得更容易一些: https://developer.mozilla.org/en-US/docs/Web/CSS/attr#browser_compatibility

此外，如果CSS可以划分2个单位值(例如px和ch)，这可能会更动态，目前这必须手动完成。

在这里看到的:

https://jsfiddle.net/qns0pov2/3/

创建一个1ch的立方体，看看它在你的目标单位中有多大(在它的px中)，计算每行字符的数量，并使用该值来获得每个内容长度的完美字体大小。

小提琴也显示了这种方法的问题:平均字符宽度小于1ch(基于0)，但有像M这样的字符更大(大约70%)。

因此，如果你希望保证字符适合空间调整小提琴这样:——ch-width: calc(8.109 * 1.7);

如果你对平均情况更感兴趣:——ch-width: calc(8.109 * 0.92);

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

    .NotMuchText {
        font-size: 20px;
    }

    .LotsOfText {
        font-size: 10px;
    }

我还想要一个非javascript解决方案，CSS解决方案，并诉诸于PHP/CSS解决方案。

我从BootStrap某处获得了这个动态字体大小calc()，并调整了它以适应。基于4pt系统和rem https://www.finsweet.com/client-first/docs/sizes的Webflow项目:

html {font-size: 16px;}

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); body {font-family: 'Poppins', sans-serif;} /*---SETUP BASE SIZE ---*/ html {font-size: 16px;} /*---LINE-HEIGHTS + MARGINS---*/ [class^="display"], h1, h2, h3, h4 { margin-top: 0; margin-bottom: 1rem; font-weight: 600; } .display-1, .display-2, .display-3, .display-4 { line-height: 1.2; } h1, h2, h3, h4 { line-height: 1.4; } p, ul, ol { margin-bottom: 0.7rem; line-height: 1.45; } .lead { margin-bottom: 1rem; line-height: 1.4; } /*---FONT SIZES 1279px DOWN---*/ @media (max-width: 1279px) { .display-1 { font-size: calc(1.625rem + 4.5vw); } .display-2 { font-size: calc(1.575rem + 3.9vw); } .display-3 { font-size: calc(1.525rem + 3.3vw); } .display-4 { font-size: calc(1.475rem + 2.7vw); } /*---HEADINGS---*/ h1 { font-size: calc(1.375rem + 1.5vw); } h2 { font-size: calc(1.325rem + 0.9vw); } h3 { font-size: calc(1.3rem + 0.6vw); } h4 { font-size: calc(1.275rem + 0.3vw); } /*---PARAGRAPHS/UL/OL---*/ p, ul, ol { font-size: calc(0.823rem + 0.3vw); } .lead { font-size: calc(1.01rem + 0.3vw); } } /*---FONT SIZES ABOVE 1279px---*/ @media screen and (min-width: 1280px) { .display-1 { font-size: 5.22rem; } .display-2 { font-size: 4.7rem; } .display-3 { font-size: 4.16rem; } .display-4 { font-size: 3.63rem; } /*---HEADINGS---*/ h1 { font-size: 2.58rem; } h2 { font-size: 2.05rem; } h3 { font-size: 1.78rem; } h4 { font-size: 1.52rem; } p, ul, ol { font-size: 1.0625rem; } .lead { font-size: 1.25rem; } } <section> <div class="container"> <p style="color:#8C8C8C;"><i>Note: Resize window too see text grow/shrink in browser window <= 1279px</i></p> <br> <h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1> <br> <br> <br> <br> <h1>h1. The quick brown fox jumps over the lazy dog</h1> <h2>h2. The quick brown fox jumps over the lazy dog</h2> <h3>h3. The quick brown fox jumps over the lazy dog</h3> <h4>h4. The quick brown fox jumps over the lazy dog</h4> <p>The earliest known appearance of the phrase was in The Boston Journal. In an article titled "Current Notes" in the February 9, 1885, edition, the phrase is mentioned as a good practice sentence for writing students: "A favorite copy set by writing teachers for their pupils is the following, because it contains every letter of the alphabet: 'A quick brown fox jumps over the lazy dog.'"[2] Dozens of other newspapers published the phrase over the next few months, all using the version of the sentence starting with "A" rather than "The"</p> <p>The earliest known use of the phrase starting with "The" is from the 1888 book Illustrative Shorthand by Linda Bronson.[4] The modern form (starting with "The") became more common even though it is slightly longer than the original (starting with "A").</p> <p>A 1908 edition of the Los Angeles Herald Sunday Magazine records that when the New York Herald was equipping an office with typewriters "a few years ago", staff found that the common practice sentence of "now is the time for all good men to come to the aid of the party" did not familiarize typists with the entire alphabet, and ran onto two lines in a newspaper column. They write that a staff member named Arthur F. Curtis invented the "quick brown fox" pangram to address this.</p> <br> <br> <br> <br> <p class="lead">Lead paragraph: As the use of typewriters grew in the late 19th century.</p> <p>The phrase began appearing in typing lesson books as a practice sentence. Early examples include How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890),[6] and Typewriting Instructor and Stenographer's Hand-book (1892). By the turn of the 20th century, the phrase had become widely known. In the January 10, 1903, issue of Pitman's Phonetic Journal, it is referred to as "the well known memorized typing line embracing all the letters of the alphabet".</p> <p>Robert Baden-Powell's book Scouting for Boys (1908) uses the phrase as a practice sentence for signaling.</p> <p>The first message sent on the Moscow–Washington hotline on August 30, 1963, was the test phrase "THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG'S BACK 1234567890".</p> <br> <br> <br> <br> <ul class="list-unordered"> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> </ul> <br> <br> <br> <br> <ol class="list-ordered"> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> </ol> <br> <br> <br> <br> </div> </section>

享受