Javascript 通过更改文本自动调整已定义DIV中的字体大小

Javascript 通过更改文本自动调整已定义DIV中的字体大小,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想通过每隔几秒钟用另一种语言的同一句话来自动翻译我网站上的文本,但这不是我的问题所在 我已经得到了这个设置的JS,它看起来像这样: jQuery(函数($){ var languages=[“你好,我的美洲狮X!我的美洲狮是一个美丽的网络。”,“你好,我的好朋友X.Willkomen auf meiner Webseite。”,”你好, 我叫 十,欢迎来到我的网站。"]; var计数器=0; var$exc=$(“#翻译”) setInterval(函数(){ $exc.text(语言[计数

我想通过每隔几秒钟用另一种语言的同一句话来自动翻译我网站上的文本,但这不是我的问题所在

我已经得到了这个设置的JS,它看起来像这样:

jQuery(函数($){
var languages=[“你好,我的美洲狮X!我的美洲狮是一个美丽的网络。”,“你好,我的好朋友X.Willkomen auf meiner Webseite。”,”你好, 我叫 十,欢迎来到我的网站。"];
var计数器=0;
var$exc=$(“#翻译”)
setInterval(函数(){
$exc.text(语言[计数器++);
如果(计数器>=语言.length){
计数器=0;
}
}, 1600)
})

你好, 我叫 简。欢迎来到我的网站。希望这能奏效:


使用它看起来像这样:

p{
字体大小:4vw;

}
改变文本的
字体大小在这里并不难

  • 将文本的默认(当前)
    字体大小
    保存到某个变量
  • 应用翻译后,应用默认的
    字体大小
  • 比较容器的宽度(在本例中为
    body
    ,但您可以更改它)和文本元素的宽度(在当前情况下为
    #translate
  • 如果文本元素的宽度大于容器的宽度,则将
    font size
    减小一些值(例如
    0.1px
    ),然后转到步骤3。如果否,则仅此而已
  • 不要忘记使用
    h2
    inline块使其宽度由内容定义,并添加
    空白:nowrap
    以防止文本移动到下一行并允许我们进行计算

    演示:

    jQuery(函数($){
    var languages=[“你好,我是拉莫·詹!我是潘基纳网的一员。”,“你好,我是詹·威尔科门·奥夫·梅纳·韦伯塞特。”你好, 我叫 简。欢迎来到我的网站。"];
    var计数器=0;
    var$exc=$(“#翻译”);
    var defaultFontSize=parseFloat($exc.css(“字体大小”);
    函数adjustFontSize(){
    var fontSize=defaultFontSize;
    $exc.css(“字体大小”,fontSize+“px”);
    而($(“body”).width()<$exc.width()){
    fontSize-=0.1;
    $exc.css(“字体大小”,fontSize+“px”);
    }
    };
    调整字体大小();
    setInterval(函数(){
    $exc.text(语言[计数器++);
    调整字体大小();
    如果(计数器>=语言.length){
    计数器=0;
    }
    }, 1600)
    })
    正文{
    /*演示时仅需300像素宽*/
    宽度:300px;
    /*只是演示的样式*/
    右边框:1px点灰色;
    高度:100vh;
    保证金:0;
    }
    #翻译{
    /*获取宽度并禁用换行*/
    显示:内联块;
    空白:nowrap;
    }
    
    
    你好, 我叫 简。欢迎来到我的网站。哇,非常感谢!确实是一个非常简单但有效的解决方案。没有想到。:)不太有效,很遗憾。谢谢你的建议。:)由于文本长度不同,这不起作用。不过,谢谢你的建议。:)
    $('h2').flowtype({
     minFont : 10,
     maxFont : 40,
     minimum : 500,
     maximum : 1200,
     fontRatio : 70
    });