1

我在 div 中有一个跨度和动态文本，如下所示：

<div>
<span>
    dynamic text
</span>
</div>

是否可以更改字体大小，直到动态文本存储在一行中（我的意思是，没有换行）？

4

3 回答 3

0

你可以试试这个：

function adjust() {
    var text = document.getElementById('t');
    var input = document.getElementById('a');
    text.innerHTML = input.value;
    var fontSize = parseFloat(text.style.fontSize);
    fontSize -= 0.1;
    text.style.fontSize = fontSize + 'px';
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
    <div>
    <span id="t" style="font-size: 18px">
        dynamic text
    </span>
        <br/>
        <input type="text" id="a" onkeydown="adjust()"/>
    </div>
    </body>
</html>

于 2013-10-25T13:58:05.553 回答
0

首先，您需要获取跨度内的值（您必须修剪它以避免前面的空格）。

var result = $("div > span").text().trim();

然后只需使用您的预定义值检查结果并更改字体大小

if(result == "dynamic text"){
    $("span").css("font-size", "50px");
}

现场演示

于 2013-10-25T13:45:27.523 回答
-1

将 div 的溢出设置为隐藏。

<div  id="Div" style="overflow:hidden ">
 <span id ="Span" onclick="resize()">
   DynamicText
 </span>
</div>

javascript 代码减小 span 的字体大小，直到 span 的宽度小于包含 div 的宽度：

$(document).ready(function(){
{
    while(parseInt($('#Span').width()) > parseInt($('#Div').width()))
    {
        $('#Span').css('fontSize', (parseInt($('#Span').css('fontSize'))-1) +'px');
    }
}

JsFiddle 演示

于 2013-10-25T16:35:08.397 回答