调整大小字体以适合div（在一行上） [英] resize font to fit in a div (on one line)

问题描述

也有类似的问题，但解决方案与我想要做的事情。基本上，我有一个标题（< h1> ）。我不想控制标题的长度，但我也不想让标题出现在多行。是否有css或jQuery的方法来调整基于< div> 标签的宽度的文本？

我知道如果我能够检测文本到< div> 边缘的重叠，我将使用伪代码：

  var fontize = $（＃title）。css（font-size）; 
 var i = / *从整数中删除单元* / 
 while（/ *文本重叠div * /）{
 $（＃title）。css（font-size --i +pt）; 
} 
  

如果有一个CSS属性我可以设置，甚至更好，似乎没有找到一个（溢出将不会在这种情况下工作）。

解决方案

CSS no，Javascript yes

使用CSS，但你可以在javascript / jQuery中做到这一点。帮助你的伪代码，因为你已经知道该怎么做。

最好的方法是使用一个包含以下（至少）样式的DIV：

  position：absolute; 
 visibility：hidden; 
 whitespace：nowrap; 
 font-family：/ *与标题的* / 
  

相同它和设置一些起始字体大小。然后你可以遍历while循环并停止当div的宽度是适当的。

这样，此项检查就会隐藏在用户眼睛之外，因此它的工作速度也会更快。

BTW ：这是自动生成 textarea 脚本工作的常用方法。它们使用与原始文本区域相同样式设置的虚拟div，并根据用户在文本中键入的方式调整区域的高度。所以文本区域可以很小，但如果用户输入大量的文本，它会自动增长以适应内容。

while循环优化

您可以通过这样做优化您的while循环以显着减少迭代次数：

2. 获取测试DIV的宽度。


3. 计算orig_div和test_div之间的宽度系数。

测试test_div宽度


There have been similar questions asked, but the solutions do mesh with what I'm trying to do. Basically, I have an article with a title (<h1>). I don't want to control the length of the title, but I also don't want the title to appear on multiple lines. Is there a way with css or jQuery to resize text based on the width of a <div> tag?

I know what I would do with pseudocode if I could detect the overlap of the text to the edge of the <div>:

var fontize = $("#title").css("font-size");
var i = /*remove unit from integer*/
while( /*text overlaps div*/ ){
    $("#title").css("font-size", --i+"pt");
}

If there's a CSS attribute I can set that would be even nicer, but I can't seem to find one (overflow wouldn't work in this situation).

解决方案

CSS no, Javascript yes

There's no way you could do this using CSS, but you can do it in javascript/jQuery. To help you with your pseudo code because you already know what to do. It's just that you don't know how to detect excess width.

The best way would be to have a DIV with following (at least) style:

position: absolute;
visibility: hidden;
whitespace: nowrap;
font-family: /* same as your title's */

then copy your text to it and set some starting font size. Then you can iterate through your while loop and stop when div's width is appropriate. Then set calculated font size to your original title.

This way this checking will be hidden from user's eyes and it will therefore work faster as well.

BTW: This is the usual way how auto growing textarea scripts work. They use dummy divs with same style settings as the original text area and adjust area's height as the user types in text. So Text area can be quite small at first but if user types in lots of text it will auto grow to accommodate content.

While loop optimization

You could optimize your while loop to decrease the number of iterations considerably by doing this:

1. Set a starting font size.
2. get test DIV's width.
3. calculate width factor between orig_div and test_div.
4. adjust font size by this factor rather than increase/decrease by one unit
5. test test_div width

这篇关于调整大小字体以适合div（在一行上）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！