Question

我有div的跨度和动态文本，如下所示：

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

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

Answer 1

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

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

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

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

Live Demo

Answer 2

你可以试试这个：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        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';
        }
    </script>
</head>
<body>
<div>
<span id="t" style="font-size: 18px">
    dynamic text
</span>
    <br/>
    <input type="text" id="a" onkeydown="adjust()"/>
</div>
</body>
</html>

Answer 3

将div溢出设置为隐藏。

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

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

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

JsFiddle Demo

如何更改动态文本的字体大小，直到文本存储在一行中？

3 个答案: