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

【问题标题】：How to change font-size of dynamic text unitl the text is stored in one line?如何更改动态文本的字体大小，直到文本存储在一行中？
【发布时间】：2013-10-25 13:25:39
【问题描述】：

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

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

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

【问题讨论】：

您可以使用具有特定预定义值的 .text() 检查跨度内的值，并使用 jquery 更改其字体大小。

标签： javascript html css word-wrap

【解决方案1】：

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

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

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

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

Live Demo

【讨论】：

【解决方案2】：

你可以试试这个：

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>

【讨论】：

【解决方案3】：

将 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 Demo

【讨论】：