通过更改文字自定义DIV中的字体大小
问题描述:
我想通过每隔几秒钟用另一种语言的相同句子交换网站上的文本来自动翻译我的网站上的文字,但这不是我的问题所在。通过更改文字自定义DIV中的字体大小
我已经得到了JS的这种设置,它看起来像这样:
jQuery(function ($) {
var languages = ["¡Hola, me llamo Jan! Bienvenido a mi página web.", "Hallo, ich heiße Jan. Willkommen auf meiner Webseite.", "你好, 我叫 Jan。欢迎来到我的网站。"];
var counter = 0;
var $exc = $('#translate')
setInterval(function() {
$exc.text(languages[counter++]);
if (counter >= languages.length) {
counter = 0;
}
}, 1600)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h2 id="translate">你好, 我叫 Jan。欢迎来到我的网站。</h2>
现在我想调整我h2
的font-size
总是适合1线,以防止当文本长度改变时,进一步上下移动以下文本。 在手机上看起来特别糟糕。
我试过使用开源JS“jtextfill”,但它不起作用。
答
更改文本的font-size
的想法并不难这里。
- 将文本的默认(当前)
font-size
保存为某个变量。 - 将翻译应用默认
font-size
- 比较容器的宽度后(在我们的情况下,将
body
,但你可以改变它)和(在当前情况下#translate
)文本元素的宽度。 - 如果文本元素的宽度比容器的宽度大
font-size
减少某个值(例如0.1px
),并转到步骤3.如果没有,那么这就是全部。
不要忘了让你h2
内嵌块,使其宽度由内容定义,并添加white-space: nowrap
防止文本移动到下一行,让我们的计算。
演示:
jQuery(function ($) {
var languages = ["¡Hola, me llamo Jan! Bienvenido a mi página web.", "Hallo, ich heiße Jan. Willkommen auf meiner Webseite.", "你好, 我叫 Jan。欢迎来到我的网站。"];
var counter = 0;
var $exc = $('#translate');
var defaultFontSize = parseFloat($exc.css("font-size"));
function adjustFontSize() {
var fontSize = defaultFontSize;
$exc.css("font-size", fontSize + "px");
while ($("body").width() < $exc.width()) {
fontSize -= 0.1;
$exc.css("font-size", fontSize + "px");
}
};
adjustFontSize();
setInterval(function() {
$exc.text(languages[counter++]);
adjustFontSize();
if (counter >= languages.length) {
counter = 0;
}
}, 1600)
})
body {
/* just 300px width for demo */
width: 300px;
/* just styles for demo */
border-right: 1px dotted gray;
height: 100vh;
margin: 0;
}
#translate {
/* take width and disable line wrapping */
display: inline-block;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h2 id="translate">你好, 我叫 Jan。欢迎来到我的网站。</h2>
答
希望这将工作:
http://simplefocus.com/flowtype/
$('h2').flowtype({
minFont : 10,
maxFont : 40,
minimum : 500,
maximum : 1200,
fontRatio : 70
});
+0
没有完全工作,可悲。不过谢谢你的建议。 :) – Jan
哇,非常感谢!确实是一个非常简单但有效的解决方案。没想到它。 :) – Jan