blocks|key|852778|text|这个问题可能会对你有所帮助，但我警告你，尽管它通过jQuery解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|852779|Auto-size+dynamic+text+to+fill+fixed+size+container|offset|length|852780|祝好运。|852781|这个问题操作生成了一个插件，here+is+the+link+to+it+(&+download)|852782|顺便说一句，我之所以建议使用jQuery，是因为作为Gaby+pointed+out，这不能只通过CSS来完成，而你说你愿意使用js……|852783|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container|1|http://plugins.jquery.com/project/TextFill|2|http://plugins.jquery.com/files/jQuery-TextFill-0.1.zip|3|https://stackoverflow.com/questions/4408937/font-size-auto-adjust-to-fit/4408978#4408978^0|0|0|1F|0|0|0|E|M|1|14|8|2|0|Q|G|3|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]|$D|19|E|1A|1|1B]]|A|$]]|$1|J|3|K|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|L|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|U]]|V|$5|O|P|Q|A|$R|W]]|X|$5|O|P|Q|A|$R|Y]]]]

This question might help you out but I warn you though this solves it through jQuery:

<a href="https://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container">Auto-size dynamic text to fill fixed size container</a>

Good luck.

The OP of that question made a plugin, <a href="http://plugins.jquery.com/project/TextFill" rel="nofollow noreferrer">here is the link to it</a> (&amp; <a href="http://plugins.jquery.com/files/jQuery-TextFill-0.1.zip" rel="nofollow noreferrer">download</a>)

BTW I'm suggesting jQuery because as <a href="https://stackoverflow.com/questions/4408937/font-size-auto-adjust-to-fit/4408978#4408978">Gaby pointed out</a> this can't be done though CSS only and you said you were willing to use js...

blocks|key|852746|text|使用CSS无法完成此操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|852747|100%25与父元素的计算font-size相关。|offset|length|style|CODE|852748|参考：http://www.w3.org/TR/CSS2/fonts.html#font-size-props|852749|有关jQuery解决方案，请查看Auto-size+dynamic+text+to+fill+fixed+size+container|852750|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS2/fonts.html#font-size-props|1|https://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container^0|0|B|9|0|3|1G|0|0|G|1F|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|L|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|U]]]]

Can't be done with CSS.

100% is in relation to the computed <code>font-size</code> of the parent element.

reference: <a href="http://www.w3.org/TR/CSS2/fonts.html#font-size-props" rel="nofollow noreferrer">http://www.w3.org/TR/CSS2/fonts.html#font-size-props</a>

For a jQuery solution look at <a href="https://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container">Auto-size dynamic text to fill fixed size container</a>

blocks|key|852848|text|有点晚了，但这是我处理这个问题的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|852849|document.body.setScaledFont+=+function()+{
++++var+f+=+0.35,+s+=+this.offsetWidth,+fs+=+s+*+f;
++++this.style.fontSize+=+fs+%2B+'%25';
++++return+this
}
document.body.setScaledFont();|code-block|syntax|javascript|852850|基本文档字体现在已设置好。|852851|对于dom中的其余元素，将字体大小设置为%25或em，它们将按比例缩放。|852852|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|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

A bit late but this is how I approach this problem:

<pre><code>document.body.setScaledFont = function() {
 var f = 0.35, s = this.offsetWidth, fs = s * f;
 this.style.fontSize = fs + '%';
 return this
}
document.body.setScaledFont();
</code></pre>

The base document font is now set.

For the rest of your elements in the dom set font sizes as % or em and they will scale proportionately.

blocks|key|852803|text|这里我有一个mootools解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|852804|Element.implement("fitText",+function()+{
++++++++++++++++var+e+=+this.getParent();
++++++++++++++++var+maxWidth+=+e.getSize().x;
++++++++++++++++var+maxHeight+=+e.getSize().y;
++++++++++++++++console.log(maxWidth);
++++++++++++++++var+sizeX+=+this.getSize().x;
++++++++++++++++var+sizeY+=+this.getSize().y;
++++++++++++++++if+(sizeY+<=+maxHeight+&&+sizeX+<=+maxWidth)
++++++++++++++++++++return;

++++++++++++++++var+fontSize+=+this.getStyle("font-size").toInt();
++++++++++++++++while(+(sizeX+>+maxWidth+%7C%7C+sizeY+>+maxHeight)+&&+fontSize+>+4+)+{
++++++++++++++++++++fontSize+-=+.5;
++++++++++++++++++++this.setStyle("font-size",+fontSize+%2B+"px");
++++++++++++++++++++sizeX+=+this.getSize().x;
++++++++++++++++++++sizeY+=+this.getSize().y;
++++++++++++++++}
++++++++++++++++return+this;
++++++++++++});

++++++++++++$$("span").fitText();|code-block|syntax|javascript|852805|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|$]]

here I have a mootools solution:

<pre><code>Element.implement("fitText", function() {
 var e = this.getParent();
 var maxWidth = e.getSize().x;
 var maxHeight = e.getSize().y;
 console.log(maxWidth);
 var sizeX = this.getSize().x;
 var sizeY = this.getSize().y;
 if (sizeY &lt;= maxHeight &amp;&amp; sizeX &lt;= maxWidth)
 return;

 var fontSize = this.getStyle("font-size").toInt();
 while( (sizeX &gt; maxWidth || sizeY &gt; maxHeight) &amp;&amp; fontSize &gt; 4 ) {
 fontSize -= .5;
 this.setStyle("font-size", fontSize + "px");
 sizeX = this.getSize().x;
 sizeY = this.getSize().y;
 }
 return this;
 });

 $$("span").fitText();
</code></pre>

blocks|key|852854|text|这是另一个jQuery解决方案...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|852855|/**
+*+Resizes+page+header+font-size+for+the+text+to+fit.
+*+basically+we+add+a+hidden+span+into+the+header,
+*+put+the+text+into+it+and+then+keep+reducing+the+super+large+font-size
+*+for+as+long+as+the+height+of+the+span+exceeds+the+super
+*+tall+line-height+set+for+the+test+(indicating+there+is+more+than+one+line+needed
+*+to+show+the+text).
+*/
function+setPageHeaderFontSize(selectorString)+{
++++jQuery(selectorString).each(
++++++++function(i,+el)+{
++++++++++++var+text+=+jQuery(el).text();
++++++++++++var+length+=+text.length;
++++++++++++if(length)+{
++++++++++++++++var+id+=+"TestToSeeLengthOfElement_"+%2B+i;
++++++++++++++++jQuery(el).append("<span+style='visibility:+hidden;+width:+100%25;+position:+absolute;+line-height:+300px;+top:+0;+left:+0;+overflow:+visible;+display:+table-cell;'+id='"%2Bid%2B"'>"%2Btext%2B"");
++++++++++++++++var+innerEl+=+jQuery("#"%2Bid);
++++++++++++++++var+height+=+301;
++++++++++++++++var+fontSize+=+200;
++++++++++++++++while(height+>+300+&&+fontSize+>+10)+{
++++++++++++++++++++height+=+jQuery(innerEl).css("font-size",+fontSize).height();
++++++++++++++++++++fontSize--;
++++++++++++++++}
++++++++++++++++jQuery(innerEl).remove();
++++++++++++++++jQuery(el).css("font-size",+fontSize%2B"px");
++++++++++++}
++++++++}
++++);
}

//you+can+run+it+like+this...+using+any+jQuery+enabled+selector+string+(e.g.+h1.pageHeaders+works+fine).+
setPageHeaderFontSize("#MyDiv");|code-block|syntax|javascript|852856|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|$]]

Here is another jQuery solution ... 

<pre><code>/**
 * Resizes page header font-size for the text to fit.
 * basically we add a hidden span into the header,
 * put the text into it and then keep reducing the super large font-size
 * for as long as the height of the span exceeds the super
 * tall line-height set for the test (indicating there is more than one line needed
 * to show the text).
 */
function setPageHeaderFontSize(selectorString) {
 jQuery(selectorString).each(
 function(i, el) {
 var text = jQuery(el).text();
 var length = text.length;
 if(length) {
 var id = "TestToSeeLengthOfElement_" + i;
 jQuery(el).append("&lt;span style='visibility: hidden; width: 100%; position: absolute; line-height: 300px; top: 0; left: 0; overflow: visible; display: table-cell;' id='"+id+"'&gt;"+text+"&lt;/span&gt;");
 var innerEl = jQuery("#"+id);
 var height = 301;
 var fontSize = 200;
 while(height &gt; 300 &amp;&amp; fontSize &gt; 10) {
 height = jQuery(innerEl).css("font-size", fontSize).height();
 fontSize--;
 }
 jQuery(innerEl).remove();
 jQuery(el).css("font-size", fontSize+"px");
 }
 }
 );
}

//you can run it like this... using any jQuery enabled selector string (e.g. h1.pageHeaders works fine). 
setPageHeaderFontSize("#MyDiv");
</code></pre>

blocks|key|1067463|text|这里有一种方法可以找到你正在使用的文本的高度。它很简单，而且只使用javascript。您可以使用此选项相对于所需的高度调整文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1067464|function+getTextHeight(text,+fontSize)+{
++++var+numberOfLines+=+0;
++++var+STL+=+text;
++++for(var+i+=+0;+i+<+STL.length;+i%2B%2B){
++++if(STL[i]+===+'<'){
++++++++try{
++++++++++++if(STL[i+%2B+1]+===+'b'+&&+STL[i+%2B+2]+===+'r'+&&+STL[i+%2B+3]+===+'>'){
++++++++++++++++numberOfLines%2B%2B;
++++++++++++}
++++++++}
++++++++catch(err){
++++++++++++break;
++++++++}
++++}
++++return+(numberOfLines+%2B+1)+*+fontSize;
}|code-block|syntax|javascript|1067465|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|$]]

Here's a way to find the height of the text that you are using.
It's simple and only uses javascript. You can use this to adjust your text relative to the height you want.

<pre><code>function getTextHeight(text, fontSize) {
 var numberOfLines = 0;
 var STL = text;
 for(var i = 0; i &lt; STL.length; i++){
 if(STL[i] === '&lt;'){
 try{
 if(STL[i + 1] === 'b' &amp;&amp; STL[i + 2] === 'r' &amp;&amp; STL[i + 3] === '&gt;'){
 numberOfLines++;
 }
 }
 catch(err){
 break;
 }
 }
 return (numberOfLines + 1) * fontSize;
}
</code></pre>

I'm trying to do what the title says. I've seen that <code>font-size</code> can be a percentage. So my guess was that <code>font-size: 100%;</code> would do it, but no.

Here is an example: <a href="http://jsfiddle.net/xVB3t/">http://jsfiddle.net/xVB3t/</a>

Can I get some help please?

(If is necesary to do it programatically with js there is no problem)

Font size auto adjust to fit

我试着按照标题所说的去做。我已经看到font-size可以是一个百分比。所以我的猜测是font-size: 100%;会这么做，但不是。下面是一个示例：能帮我个忙吗？(如果使用js编程是必要的，那么没有问题)

问字体大小自动调整以适合
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体大小自动调整以适合EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体大小自动调整以适合
EN