blocks|key|878213|text|你可以做很多事情，比如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|878214|overflow:hidden|code-block|syntax|javascript|878215|这就去掉了额外的代码行|878216|overflow:auto+//显示滚动条|offset|length|style|CODE|878217|看看这个|878218|http://www.w3schools.com/Css/pr_pos_overflow.asp|878219|尝试这样做//检查文本的长度|878220|if($('#idfortext').length>sometthing)
{
var+fontsize=10;
}
$('#yourid').css('font-size',fontsize)|878221|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|D|0|0|0|1C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|16|8|@$K|17|L|18|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|19|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@$K|1B|L|1C|1|1D]]|A|$]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|R]]]]

<p>you can do multiple things like</p>

<pre><code>overflow:hidden
</code></pre>

<p>this cuts the extra line</p>

<p><code>overflow:auto</code> // this shows the scroll bar</p>

<p>see this</p>

<p><a href="http://www.w3schools.com/Css/pr_pos_overflow.asp" rel="nofollow">http://www.w3schools.com/Css/pr_pos_overflow.asp</a></p>

<p>try to do this
//check the length of the text</p>

<pre><code>if($('#idfortext').length&gt;sometthing)
{
var fontsize=10;
}
$('#yourid').css('font-size',fontsize)
</code></pre>


blocks|key|1092977|text|我不确定是否有任何准确的方法来测量文本的像素宽度(这是你真正寻找的问题的根源)，因为每个浏览器可能显示不同的字体。除了根据句子中的字母数进行一些“模糊”调整之外，您可能还想尝试使用此CSS代码。您可以尝试使用固定宽度的字体(或样式)来显示文本，以便每个字符占用相同的空间。这样，您就可以做出最佳猜测，而CSS至少会给您一个很好的"...“如果需要，在裁剪文本之前。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1092978|.truncate+
{+
++++overflow:+hidden;+
++++white-space:+nowrap;+
++++text-overflow:+ellipsis;+
}+|code-block|syntax|javascript|1092979|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Im not sure there is any accurate way to measure text's width in pixels (which is what you're really looking for at the root of your problem), as each browser may display the fonts differently. You might want to try using this CSS code, in addition to doing some "Fuzzy" resizing based on the number of letters in the sentence. You can try using a fixed-width font (or style) to display the text so that each character takes up the same amount of space. This way, you can make a best guess, and the CSS will at least give you a nice "..." before cropping the text, if needed.</p>

<pre><code>.truncate 
{ 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 
</code></pre>


blocks|key|878317|text|这在某种程度上是一种攻击，但可以做你想做的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|878318|<div+id="hidden-resizer"+style="visibility:+hidden"></div>|code-block|syntax|javascript|878319|将它放在页面的底部，这样它就不会移动页面上的其他元素。|878320|然后执行以下操作：|878321|var+size;
var+desired_width+=+50;
var+resizer+=+$("#hidden-resizer");

resizer.html("This+is+the+text+I+want+to+resize.");

while(resizer.width()+>+desired_width)+{
++size+=+parseInt(resizer.css("font-size"),+10);
++resizer.css("font-size",+size+-+1);
}

$("#target-location").css("font-size",+size).html(resizer.html());|878322|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This is somewhat of a hack, but will do what you want.</p>

<pre><code>&lt;div id="hidden-resizer" style="visibility: hidden"&gt;&lt;/div&gt;
</code></pre>

<p>Place this at the bottom of your page, where it will not be moving other elements on the page.</p>

<p>Then do this:</p>

<pre><code>var size;
var desired_width = 50;
var resizer = $("#hidden-resizer");

resizer.html("This is the text I want to resize.");

while(resizer.width() &gt; desired_width) {
  size = parseInt(resizer.css("font-size"), 10);
  resizer.css("font-size", size - 1);
}

$("#target-location").css("font-size", size).html(resizer.html());
</code></pre>


blocks|key|878370|text|我不知道确切的方法，但这是一个近似值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|878371|var+factor+=+1/3;++//+approximate+width-to-height+ratio
var+div+=+$('#mydiv');
div.css('font-size',+div.width()+/+(div.text().length+*+factor)+%2B+'px');|code-block|syntax|javascript|878372|你需要根据你使用的字体来调整factor。1/3似乎适用于Times+New+Roman。|offset|length|style|CODE|878373|entityMap^0|0|0|E|6|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I don't know of an exact way, but here's an approximation:</p>

<pre><code>var factor = 1/3;  // approximate width-to-height ratio
var div = $('#mydiv');
div.css('font-size', div.width() / (div.text().length * factor) + 'px');
</code></pre>

<p>You will need to adjust <code>factor</code> based on the font you are using. 1/3 seems to work okay for Times New Roman.</p>


blocks|key|878409|text|在div中，将文本放在没有填充的span中。那么跨度的宽度就是文本的长度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|878410|用于查找要使用的正确字体大小的未经测试的代码：|878411|var+objSpan+=+$('.spanThatHoldsText');++
var+intDivWidth+=+$('.divThatHasAFixedWidth').width();++
var+intResultSize;++

for+(var+intFontSize+=+1;+intFontSize+<+100;+intFontSize%2B%2B)++

++objSpan.css('font-size',+intFontSize);++

++if+(objSpan.width()+>+intDivWidth)+{++
++++intResultSize+=+intFontSize+-+1;++
++++break;++
++}++

}

objSpan.css('font-size',+intResultSize);|code-block|syntax|javascript|878412|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Inside your div, have the text in a span that has no padding. Then the span's width will be the length of the text.<br>
Untested code for finding the correct font-size to use:</p>

<pre><code>var objSpan = $('.spanThatHoldsText');  
var intDivWidth = $('.divThatHasAFixedWidth').width();  
var intResultSize;  

for (var intFontSize = 1; intFontSize &lt; 100; intFontSize++)  

  objSpan.css('font-size', intFontSize);  

  if (objSpan.width() &gt; intDivWidth) {  
    intResultSize = intFontSize - 1;  
    break;  
  }  

}

objSpan.css('font-size', intResultSize);
</code></pre>


blocks|key|1093150|text|我不知道如何将此添加到sworoc的帖子中，但我想我还是要分享一下:如果你使用任何类型的AJAX导航，Lonesomeday的解决方案就会变得一团糟。我稍微修改了一下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1093151|if+($('#hidden-resizer').length+==+0){+
++++$('<div+/>',+{id:+'hidden-resizer'}).hide().appendTo(document.body);+
}|code-block|syntax|javascript|1093152|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I couldn't figure out how to add this to sworoc's post but i thought i would share anyway:
Lonesomeday's solution gets messed up if you are using any sort of AJAX navigation. I modified it slightly to:</p>

<pre><code>if ($('#hidden-resizer').length == 0){ 
    $('&lt;div /&gt;', {id: 'hidden-resizer'}).hide().appendTo(document.body); 
}
</code></pre>


blocks|key|1093200|text|我在这里写了几篇文章，并用它做了一个jQuery插件。我发现从底部开始向上的效果不是很好，所以我假设当前的字体大小很接近，并从那里开始工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1093201|++$.fn.fitTextToWidth+=+function(desiredWidth)+{
++++//+In+this+method,+we+want+to+start+at+the+current+width+and+grow+from+there,+assuming+that+we+are+close+to+the+desired+size+already.
++++var+$el+=+$(this);
++++var+resizer+=+$('<'%2B$el.get(0).tagName%2B'+/>').css({'vsibility':'hidden','position':'absolute','left':'-9999px','display':'inline'}).html($el.html());
++++resizer.appendTo(document.body);

++++var+size+=+parseInt($el.css('font-size'));
++++resizer.css('font-size',size%2B'px');

++++var+growing+=+desiredWidth+>+resizer.width()+?+true+:+false;
++++var+adder+=+growing+?+1+:+-1;
++++do+{
++++++++size+%2B=+adder;
++++++++resizer.css('font-size',size%2B'px');
++++}+while(((growing+&&+resizer.width()<desiredWidth)+%7C%7C+(!growing+&&+resizer.width()>desiredWidth))+&&+size>10+&&+size<100);
++++if+(growing)
++++++++size+-=+2;+//we+never+want+to+go+over
++++resizer.remove();

++++$el.css('font-size',size%2B'px');+
++}

++//+Example+use:
++$('#main+h1').fitTextToWidth(350);|code-block|syntax|javascript|1093202|唯一的问题是，它假设元素的CSS是全局的，并且只应用于元素类型。换句话说，它在中创建了一个同名的标记，并假定它将具有与我们要更改的元素相同的CSS属性。如果不是这样，只需修改创建resizer的代码行即可。|offset|length|style|CODE|1093203|entityMap^0|0|0|2H|7|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I worked off a few posts here and made a jQuery plugin out of it. I found that starting from the bottom and going up wasn't very performant, so I make the assumption that the current font-size is close, and worked from there.</p>

<pre><code>  $.fn.fitTextToWidth = function(desiredWidth) {
    // In this method, we want to start at the current width and grow from there, assuming that we are close to the desired size already.
    var $el = $(this);
    var resizer = $('&lt;'+$el.get(0).tagName+' /&gt;').css({'vsibility':'hidden','position':'absolute','left':'-9999px','display':'inline'}).html($el.html());
    resizer.appendTo(document.body);

    var size = parseInt($el.css('font-size'));
    resizer.css('font-size',size+'px');

    var growing = desiredWidth &gt; resizer.width() ? true : false;
    var adder = growing ? 1 : -1;
    do {
        size += adder;
        resizer.css('font-size',size+'px');
    } while(((growing &amp;&amp; resizer.width()&lt;desiredWidth) || (!growing &amp;&amp; resizer.width()&gt;desiredWidth)) &amp;&amp; size&gt;10 &amp;&amp; size&lt;100);
    if (growing)
        size -= 2; //we never want to go over
    resizer.remove();

    $el.css('font-size',size+'px'); 
  }

  // Example use:
  $('#main h1').fitTextToWidth(350);
</code></pre>

<p>The only gotcha with this is that it assumes the CSS for the element is global and only applied to the element type.  In other words, it creates a tag of the same name in  and assumes it will have the same CSS attributes as the element we want to change.  If this isn't true for you, just modify the line where <code>resizer</code> gets created.</p>


blocks|key|878562|text|我遇到了类似的问题，这让我为此编写了自己的插件。一种解决方案是使用收缩到合适的方法，如上所述。然而，如果你必须适应多个项目或关心性能，例如调整窗口大小，可以看看jquery-quickfit。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|878563|它测量并计算适合文本的每个字母的大小不变度量，并使用该度量计算适合该文本到容器中的下一个最佳字体大小。|878564|计算被缓存，这使得它在处理多个文本或必须多次适应一个文本时非常快(实际上在第二次调整大小时没有性能影响)，比如调整窗口大小。|878565|Production+example,+fitting+14x16x2+texts|878566|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/chunksnbits/jquery-quickfit|1|http://www.four-downs.com/livedrafts/13533^0|28|F|0|0|0|0|0|15|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]]]

<p>I had a similar issue, which made me write my own plugin for this. One solution is to use the shrink-to-fit-approach, as described above. 
However if you have to fit multiple items or are concerned with performance, e.g., on window resize, have a look at <a href="https://github.com/chunksnbits/jquery-quickfit" rel="nofollow">jquery-quickfit</a>.</p>

<p>It meassures and calculates a size invariant meassure for each letter of the text to fit and uses this to calculate the next best font-size which fits the text into the container.</p>

<p>The calculations are cached, which makes it very fast (there is virtually no performance hit from the 2nd resize on forward) when dealing with multiple texts or having to fit a text multiple times, like e.g., on window resize.</p>

<p><a href="http://www.four-downs.com/livedrafts/13533" rel="nofollow">Production example, fitting 14x16x2 texts</a></p>


blocks|key|878619|text|我已经写了一个jQuery插件来做这件事：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|878620|http://michikono.github.com/boxfit|offset|length|878621|该插件将水平和垂直缩放文本到框内的最大可用尺寸，然后将其居中。|878622|您唯一需要做的就是定义一个包含文本的div：|878623|<div+id="scale">some+text</div>|code-block|syntax|javascript|878624|然后打电话给：|878625|$('#scale').boxfit()|878626|该方法将接受一些参数来禁用/启用文本换行和居中对齐。|878627|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Y|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|19|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1A|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1B|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|C]]]]

<p>I have written a jQuery plugin to do this:</p>

<p><a href="http://michikono.github.com/boxfit" rel="noreferrer">http://michikono.github.com/boxfit</a></p>

<p>The plugin will scale the text both horizontally and vertically to the maximum available size inside the box and then center it.</p>

<p>The only thing you need to do is define a div with text inside it:</p>

<pre><code>&lt;div id="scale"&gt;some text&lt;/div&gt;
</code></pre>

<p>And then call:</p>

<pre><code>$('#scale').boxfit()
</code></pre>

<p>The method will accept some arguments to disable/enable text wrapping and centered alignment.</p>


blocks|key|1093343|text|在目标类的支持下修改@sworoc版本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1093344|function+resizeText(text,+size,+target)+{

++++var+fontSize+=+0;
++++var+resizer+=+$('<span>');

++++resizer.html(text).hide();
++++resizer.attr('class',+target.attr('class'));
++++$('body').append(resizer);

++++while(resizer.width()+<+size)+{
++++++++fontSize%2B%2B
++++++++resizer.css("font-size",+fontSize);
++++}

++++target.css('font-size',+fontSize).html(text);
++++resizer.remove();
}|code-block|syntax|javascript|1093345|用法|1093346|resizeText("@arunoda",+350,+$('#username'));|1093347|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Modified version of @sworoc with the support of the target class</p>

<pre><code>function resizeText(text, size, target) {

    var fontSize = 0;
    var resizer = $('&lt;span&gt;');

    resizer.html(text).hide();
    resizer.attr('class', target.attr('class'));
    $('body').append(resizer);

    while(resizer.width() &lt; size) {
        fontSize++
        resizer.css("font-size", fontSize);
    }

    target.css('font-size', fontSize).html(text);
    resizer.remove();
}
</code></pre>

<h2>Usage</h2>

<pre><code>resizeText("@arunoda", 350, $('#username'));
</code></pre>


blocks|key|1093467|text|大多数其他答案使用循环来减小字体大小，直到它适合div，这是非常慢的，因为页面需要在每次字体大小改变时重新呈现元素。我最终不得不编写自己的算法，使其以一种允许我定期更新其内容而不会冻结用户浏览器的方式执行。我添加了一些其他功能(旋转文本，添加填充)，并将其打包为jQuery插件，您可以在以下位置获得它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1093468|https://github.com/DanielHoffmann/jquery-bigtext|offset|length|1093469|只需调用|1093470|$("#text").bigText();|code-block|syntax|javascript|1093471|它将很好地适合您的容器。|1093472|在这里看看它的实际效果：|1093473|http://danielhoffmann.github.io/jquery-bigtext/|1093474|目前，它有一些限制，div必须有固定的高度和宽度，并且它不支持将文本换行为多行。|1093475|Edit2:我现在已经修复了这些问题和限制，并添加了更多选项。您可以设置最大字体大小，也可以选择使用宽度、高度或两者之一来限制字体大小(默认设置为两者)。我将在包装器元素中接受max-width和max-height值。|1093476|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|1C|0|0|0|0|0|0|0|1B|1|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|F|3|G|5|6|7|19|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@$D|1E|E|1F|1|1G]]|A|$]]|$1|S|3|T|5|6|7|1H|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1I|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|C]]|13|$5|Z|10|11|A|$12|R]]]]

<p>Most of the other answers use a loop to reduce the font-size until it fits on the div, this is VERY slow since the page needs to re-render the element each time the font changes size. I eventually had to write my own algorithm to make it perform in a way that allowed me to update its contents periodically without freezing the user browser. I added some other functionality (rotating text, adding padding) and packaged it as a jQuery plugin, you can get it at:</p>

<p><a href="https://github.com/DanielHoffmann/jquery-bigtext" rel="nofollow">https://github.com/DanielHoffmann/jquery-bigtext</a></p>

<p>simply call</p>

<pre><code>$("#text").bigText();
</code></pre>

<p>and it will fit nicely on your container.</p>

<p>See it in action here:</p>

<p><a href="http://danielhoffmann.github.io/jquery-bigtext/" rel="nofollow">http://danielhoffmann.github.io/jquery-bigtext/</a></p>

<p>For now it has some limitations, the div must have a fixed height and width and it does not support wrapping text into multiple lines.</p>

<p>Edit2: I have now fixed those problems and limitations and added more options. You can set maximum font-size and you can also choose to limit the font-size using either width, height or both (default is both). I will work into accepting a max-width and max-height values in the wrapper element.</p>


blocks|key|1093551|text|对于新的浏览器，您可以使用Inline-SVG。这可以通过CSS像图像一样缩放。好了！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1093552|​|1093553|.smallerVersion{
max-width:+50%25
}|code-block|syntax|javascript|1093554|<!DOCTYPE+html>
<html>
<head>
<title>Scale+SVG+example</title>
</head>

<body>





<h2>Default+version:</h2>
<svg+viewBox="0+0+240+80"+xmlns="http://www.w3.org/2000/svg">
++<style>
++++.small+{+font:+italic+13px+sans-serif;+}
++++.heavy+{+font:+bold+30px+sans-serif;+}

++++/*+Note+that+the+color+of+the+text+is+set+with+the++++*
+++++*+fill+property,+the+color+property+is+for+HTML+only+*/
++++.Rrrrr+{+font:+italic+40px+serif;+fill:+red;+}
++</style>

++<text+x="20"+y="35"+class="small">My</text>
++<text+x="40"+y="35"+class="heavy">cat</text>
++<text+x="55"+y="55"+class="small">is</text>
++<text+x="65"+y="55"+class="Rrrrr">Grumpy!</text>
</svg>

<h2>Scaled+version:</h2>
<svg+class="smallerVersion"+viewBox="0+0+240+80"+xmlns="http://www.w3.org/2000/svg">
++<style>
++++.small+{+font:+italic+13px+sans-serif;+}
++++.heavy+{+font:+bold+30px+sans-serif;+}

++++/*+Note+that+the+color+of+the+text+is+set+with+the++++*
+++++*+fill+property,+the+color+property+is+for+HTML+only+*/
++++.Rrrrr+{+font:+italic+40px+serif;+fill:+red;+}
++</style>

++<text+x="20"+y="35"+class="small">My</text>
++<text+x="40"+y="35"+class="heavy">cat</text>
++<text+x="55"+y="55"+class="small">is</text>
++<text+x="65"+y="55"+class="Rrrrr">Grumpy!</text>
</svg>




</body>

</html>|1093555|1093556|(width:+100%25;)|offset|length|style|CODE|1093557|entityMap^0|0|0|0|0|0|1|C|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|Y|8|@$N|Z|O|10|P|Q]]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>For new Browsers you can use Inline-SVG. This can be scaled like an image via CSS .. !</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.smallerVersion{
max-width: 50%
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Scale SVG example&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;





&lt;h2&gt;Default version:&lt;/h2&gt;
&lt;svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;style&gt;
    .small { font: italic 13px sans-serif; }
    .heavy { font: bold 30px sans-serif; }

    /* Note that the color of the text is set with the    *
     * fill property, the color property is for HTML only */
    .Rrrrr { font: italic 40px serif; fill: red; }
  &lt;/style&gt;

  &lt;text x="20" y="35" class="small"&gt;My&lt;/text&gt;
  &lt;text x="40" y="35" class="heavy"&gt;cat&lt;/text&gt;
  &lt;text x="55" y="55" class="small"&gt;is&lt;/text&gt;
  &lt;text x="65" y="55" class="Rrrrr"&gt;Grumpy!&lt;/text&gt;
&lt;/svg&gt;

&lt;h2&gt;Scaled version:&lt;/h2&gt;
&lt;svg class="smallerVersion" viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;style&gt;
    .small { font: italic 13px sans-serif; }
    .heavy { font: bold 30px sans-serif; }

    /* Note that the color of the text is set with the    *
     * fill property, the color property is for HTML only */
    .Rrrrr { font: italic 40px serif; fill: red; }
  &lt;/style&gt;

  &lt;text x="20" y="35" class="small"&gt;My&lt;/text&gt;
  &lt;text x="40" y="35" class="heavy"&gt;cat&lt;/text&gt;
  &lt;text x="55" y="55" class="small"&gt;is&lt;/text&gt;
  &lt;text x="65" y="55" class="Rrrrr"&gt;Grumpy!&lt;/text&gt;
&lt;/svg&gt;




&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>(<code>width: 100%;</code>)</p>


blocks|key|878896|text|适合容器宽度和高度的插件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|878897|http://blissitec.github.io/scaletextjs/|offset|length|878898|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|13|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>plugin to fit to the width and height of a container</p>

<p><a href="http://blissitec.github.io/scaletextjs/" rel="nofollow">http://blissitec.github.io/scaletextjs/</a></p>


blocks|key|1093660|text|下面是我对@teambob的建议(在above+comments中)的修改，它也考虑了容器的高度：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1093661|<div+class="box"+style="width:700px;+height:200px">This+is+a+sentence</div>
<div+class="box"+style="width:600px;+height:100px">This+is+a+sentence</div>
<div+class="box"+style="width:500px;+height:50px">This+is+a+sentence</div>
<div+class="box"+style="width:400px;+height:20px">This+is+a+sentence</div>|code-block|syntax|javascript|1093662|然后..。|1093663|$('.box').each(function(i,+box)+{

++++var+width+=+$(box).width(),
++++++++height+=+$(box).height(),
++++++++html+=+'<span+style="white-space:nowrap">',
++++++++line+=+$(box).wrapInner(html).children()[0],
++++++++maxSizePX+=+2000;

++++$(box).css('font-size',+maxSizePX);
++++var+widthFontSize+=+Math.floor(width/$(line).width()*maxSizePX),
++++++++heightFontSize+=+Math.floor(height/$(line).height()*maxSizePX),
++++++++maximalFontSize+=+Math.min(widthFontSize,+heightFontSize,+maxSizePX);

++++$(box).css('font-size',+maximalFontSize);
++++$(box).text($(line).text());

});|1093664|请参阅Fiddle|1093665|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/4166237/134536|1|http://jsfiddle.net/Fu3Pt/^0|I|E|0|0|0|0|0|3|6|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

<p>Here's my modification to @teambob's suggestion (in <a href="https://stackoverflow.com/a/4166237/134536">above comments</a>) that takes also the height of the container into account: </p>

<pre><code>&lt;div class="box" style="width:700px; height:200px"&gt;This is a sentence&lt;/div&gt;
&lt;div class="box" style="width:600px; height:100px"&gt;This is a sentence&lt;/div&gt;
&lt;div class="box" style="width:500px; height:50px"&gt;This is a sentence&lt;/div&gt;
&lt;div class="box" style="width:400px; height:20px"&gt;This is a sentence&lt;/div&gt;
</code></pre>

<p>And then..</p>

<pre><code>$('.box').each(function(i, box) {

    var width = $(box).width(),
        height = $(box).height(),
        html = '&lt;span style="white-space:nowrap"&gt;',
        line = $(box).wrapInner(html).children()[0],
        maxSizePX = 2000;

    $(box).css('font-size', maxSizePX);
    var widthFontSize = Math.floor(width/$(line).width()*maxSizePX),
        heightFontSize = Math.floor(height/$(line).height()*maxSizePX),
        maximalFontSize = Math.min(widthFontSize, heightFontSize, maxSizePX);

    $(box).css('font-size', maximalFontSize);
    $(box).text($(line).text());

});
</code></pre>

<p>See <a href="http://jsfiddle.net/Fu3Pt/" rel="nofollow noreferrer">Fiddle</a></p>


blocks|key|1093728|text|这是我的解决方案:我在提供的div中的一个新div中测量文本，以便样式应该被继承。然后，我将文本插入到div中，并使用span设置字体大小。它将最大为默认字体大小，但将缩小以适合。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1093729|它不会循环:在直接绘制到所提供的div之前，它只在一个一次性div中绘制一次文本。参见@Hoffmann+answer+--我只是不喜欢一个完整的“插件”来回答这个问题。|1093730|需要jquery。|1093731|var+txt+=+txt+%7C%7C+{}
txt.pad_factor+=+1.1;
txt.insertText_shrinkToFit+=+function(div,text)
{
++var+d+=+txt.cache+%7C%7C+$('<div></div>');
++txt.cache+=+d;

++d.css('white-space','nowrap');
++d.css('position','absolute');
++d.css('top','-10000px');
++d.css('font-size','1000px');

++var+p+=+$(div);
++var+max_w+=+parseInt(p.css('max-width'))+%7C%7C+p.width();
++var+max_h+=+parseInt(p.css('font-size'));

++p.append(d);
++d.html(text);
++var+w+=+d.width()+*+txt.pad_factor;+
++d.remove();

++var+h+=+Math.floor(max_w*1000/w);
++var+s+=+(+max_h+<+h+?+max_h+:+h+)+%2B+"px";

++p.html('<SPAN+style="font-size:'+%2B+s+%2B+'">'+%2B+text+%2B+'</SPAN>');
}|code-block|syntax|javascript|1093732|例如：|1093733|<html><head><script+src=http://code.jquery.com/jquery-latest.min.js></script>
<script>/*insert+code,+from+above,+here.*/</script></head><body>

<div+id=mysmalldiv+style="max-width:300px;font-size:50px"></div>
<script>
++txt.insertText_shrinkToFit("#mysmalldiv","My+super+long+text+for+this+div.");
</script>

</body></html>|1093734|用于测试:这就是我发现我需要1.1+pad_factor的原因；您可以根据需要对其进行调优。|1093735|<div+id=mytestdiv+style="max-width:300px;font-size:50px"></div>
<script>
++var+t+=+"my+text+";
++var+i+=+0;
++var+f+=+function()+{
++++t+%2B=+i+%2B+"+";
++++txt.insertText_shrinkToFit("#mytestdiv",t);
++++i%2B%2B;
++++if(i+<+100)+
++++++setTimeout(f,1000);
++}
++f();
</script>|1093736|注意:这是假设px字体大小。我没有用em或pt测试过。|1093737|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>Here is my solution: I measure the text in a new div within the provided div, so that the styling should be inherited. Then I insert the text into the div with a span to set the font-size. It will max out to the default font size but will shrink to fit.</p>

<p>It does not loop: it only draws the text once in a throw-away div before drawing directly to the supplied div. See @Hoffmann answer - I just did not like an entire 'plugin' to answer the question.</p>

<p>requires jquery.</p>

<pre><code>var txt = txt || {}
txt.pad_factor = 1.1;
txt.insertText_shrinkToFit = function(div,text)
{
  var d = txt.cache || $('&lt;div&gt;&lt;/div&gt;');
  txt.cache = d;

  d.css('white-space','nowrap');
  d.css('position','absolute');
  d.css('top','-10000px');
  d.css('font-size','1000px');

  var p = $(div);
  var max_w = parseInt(p.css('max-width')) || p.width();
  var max_h = parseInt(p.css('font-size'));

  p.append(d);
  d.html(text);
  var w = d.width() * txt.pad_factor; 
  d.remove();

  var h = Math.floor(max_w*1000/w);
  var s = ( max_h &lt; h ? max_h : h ) + "px";

  p.html('&lt;SPAN style="font-size:' + s + '"&gt;' + text + '&lt;/SPAN&gt;');
}
</code></pre>

<p>For example:</p>

<pre><code>&lt;html&gt;&lt;head&gt;&lt;script src=http://code.jquery.com/jquery-latest.min.js&gt;&lt;/script&gt;
&lt;script&gt;/*insert code, from above, here.*/&lt;/script&gt;&lt;/head&gt;&lt;body&gt;

&lt;div id=mysmalldiv style="max-width:300px;font-size:50px"&gt;&lt;/div&gt;
&lt;script&gt;
  txt.insertText_shrinkToFit("#mysmalldiv","My super long text for this div.");
&lt;/script&gt;

&lt;/body&gt;&lt;/html&gt;
</code></pre>

<p>For testing: this is how I found that I needed the 1.1 pad_factor; which you may tune to your needs.</p>

<pre><code>&lt;div id=mytestdiv style="max-width:300px;font-size:50px"&gt;&lt;/div&gt;
&lt;script&gt;
  var t = "my text ";
  var i = 0;
  var f = function() {
    t += i + " ";
    txt.insertText_shrinkToFit("#mytestdiv",t);
    i++;
    if(i &lt; 100) 
      setTimeout(f,1000);
  }
  f();
&lt;/script&gt;
</code></pre>

<p>Note: this is assuming px font-size. I have not tested with em or pt.</p>


blocks|key|1093816|text|在纯CSS中，有一个很好的方法可以用来处理单行文本，比如headers之类的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1093817|h1{
++++font-size:+4.5vw;
++++margin:+0+0+0+0;
++++line-height:+1em;
++++height:+1em;
}

h1:after{
++++content:"";
++++display:+inline-block;
++++width:+100%25;
}|code-block|syntax|javascript|1093818|确保您的字体大小保持足够小，以保持标题1行。使用'vw‘(视区宽度)而不是'px’可以很容易做到这一点并同时缩放。当你的浏览器窗口非常大时，视窗宽度就会变得很糟糕，很多网站用它来使网站在很宽的屏幕上保持在一定的宽度以下：|1093819|body{
+++max-width:+820px;
+++margin:+0+auto;
}|1093820|要确保一旦站点的其余部分停止缩放，您的字体不是基于视口窗口的大小，请使用以下内容：|1093821|@media(min-width:820px){
+++h1{
++++++font-size:+30px;+
+++}
}|1093822|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>There is a great way to do this for single line texts, like headers and such, in pure CSS:</p>

<pre><code>h1{
    font-size: 4.5vw;
    margin: 0 0 0 0;
    line-height: 1em;
    height: 1em;
}

h1:after{
    content:"";
    display: inline-block;
    width: 100%;
}
</code></pre>

<p>Make sure your font-size stays small enough to keep the header 1 line. Using 'vw' (viewport width) instead of 'px' makes it very easy to do this and scale at the same time. viewport width has the tendency to get nasty when you make your browser window very big, many sites use this to keep the site under a certain width on really wide screens:</p>

<pre><code>body{
   max-width: 820px;
   margin: 0 auto;
}
</code></pre>

<p>To make sure your font is not based on how big the viewport window is once the rest of your site stops scaling use this:</p>

<pre><code>@media(min-width:820px){
   h1{
      font-size: 30px; 
   }
}
</code></pre>


blocks|key|879120|text|我做了另一个插件来解决这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|879121|https://github.com/jeremiahrose/perfectFit.js|offset|length|879122|它会生成SVG，所以速度非常快--只需在页面加载时运行一次。能够自动包装和缩放单个单词，以精确地适应div。|879123|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|19|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

<p>I made (yet) another plugin to address this issue:</p>

<p><a href="https://github.com/jeremiahrose/perfectFit.js" rel="nofollow noreferrer">https://github.com/jeremiahrose/perfectFit.js</a></p>

<p>It generates SVG's so it's very fast - just runs once on page load. Capable of automatically wrapping and scaling individual words to fit a div exactly.</p>


blocks|key|879209|text|我用的是香草js。当我创建div时，我为给定的宽度设置了默认的字体大小%25，这对我来说改变水平大小是有效的。在我的例子中，我将div包装在一个更大的类中，但出于这些目的，您可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|879210|document.getElementById("mydiv").fontScale+=+{scaleVal:+scaleFactor,+defaultWidth:+defaultWidth}|code-block|syntax|javascript|879211|scaleFactor是给定宽度(默认宽度)所需的字体大小(以百分比表示)。然后，当我得到一个resize事件时：|879212|let+myDiv+=+document.getElementById("mydiv");
let+width+=+myDiv.offsetWidth;
myDiv.style[fontSize]+=+String(width/myDiv.fontScale.defaultWidth+*+myDiv.fontScale.scaleFactor+*+100)+%2B+"%25";|879213|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I'm using vanilla js.  A solution that worked for me for changes in horizontal sizing is when I create the div, I set a default font size % for a given width.  In my case, I'm wrapping the div in a bigger class, but for these purposes, you could use:</p>

<pre><code>document.getElementById("mydiv").fontScale = {scaleVal: scaleFactor, defaultWidth: defaultWidth}
</code></pre>

<p>the scaleFactor is the size of the font (in percentage) that you want for a given width (the default width).  Then when I get a resize event:</p>

<pre><code>let myDiv = document.getElementById("mydiv");
let width = myDiv.offsetWidth;
myDiv.style[fontSize] = String(width/myDiv.fontScale.defaultWidth * myDiv.fontScale.scaleFactor * 100) + "%";
</code></pre>


blocks|key|879247|text|简单解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|879248|<div+class="fitt-text"><span>text</span></div>|code-block|syntax|javascript|879249|js|879250|$(".fitt-text").css('font-size',+'1vw');
++++
var+cw+=+$(".fitt-text").width();
var+w+=+$(".fitt-text+span").width();
var+f+=+cw/w;

$(".fitt-text").css('font-size',+f+%2B+'vw');|879251|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Simple solution</p>
<pre><code>&lt;div class=&quot;fitt-text&quot;&gt;&lt;span&gt;text&lt;/span&gt;&lt;/div&gt;
</code></pre>
<p>js</p>
<pre><code>$(&quot;.fitt-text&quot;).css('font-size', '1vw');
    
var cw = $(&quot;.fitt-text&quot;).width();
var w = $(&quot;.fitt-text span&quot;).width();
var f = cw/w;

$(&quot;.fitt-text&quot;).css('font-size', f + 'vw');
</code></pre>


<p>In JavaScript/jQuery, how can I scale a varying-length line of text inside a fixed-width Div so that the one line always fits inside the Div (as one line)?</p>

<p>Thanks.</p>


JavaScript Scale Text to Fit in Fixed Div

容器

jQuery

在JavaScript/jQuery中，如何在固定宽度的Div中缩放可变长度的文本行，以使一行始终适合Div (作为一行)？谢谢。

问JavaScript缩放文本以适应固定分区
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript缩放文本以适应固定分区EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript缩放文本以适应固定分区
EN