作为参考，一个非css解决方案:

下面是一些JS，根据容器内的文本长度来调整字体大小。

代码依赖于略有修改的代码，但相同的想法如下:

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

所以,最终:

短文:“苹果” 完全渲染，漂亮的大字母。 长文本:“苹果和橘子” 通过上面的JS缩放函数缩小70%。 超长文本:“苹果、橘子和香蕉……” 通过上面的JS缩放函数和CSS规则，缩小70%并用“…”省略号截断。

您还可以尝试使用CSS字母间距来使文本更窄，同时保持相同的字体大小。

唯一的方法可能是为不同的屏幕大小设置不同的宽度，但这种方法是非常不准确的，你应该使用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;
    }
}

注意:此解决方案根据视口大小而不是内容的数量而更改

我刚刚发现这是可能的使用大众单位。它们是与设置视口宽度相关的单元。它有一些缺点，比如缺乏传统浏览器的支持，但这绝对是值得认真考虑的。另外，你仍然可以为旧的浏览器提供备份，如下所示:

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

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

作为参考，一个非css解决方案:

下面是一些JS，根据容器内的文本长度来调整字体大小。

代码依赖于略有修改的代码，但相同的想法如下:

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

所以,最终:

短文:“苹果” 完全渲染，漂亮的大字母。 长文本:“苹果和橘子” 通过上面的JS缩放函数缩小70%。 超长文本:“苹果、橘子和香蕉……” 通过上面的JS缩放函数和CSS规则，缩小70%并用“…”省略号截断。

您还可以尝试使用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>

享受

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

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

这对我很有效!