Javascript jQuery CSS 字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3893507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery CSS font-size
提问by t0mcat
How do I auto resize the font-size of a <td>if the content goes into second line? I know how to increase/decrease font size using CSS and jquery but how to automatically make the font-size smaller if a particular or all the td's with a specific class name text gets longer then one line.
<td>如果内容进入第二行，如何自动调整 a 的字体大小？我知道如何使用 CSS 和 jquery 增加/减少字体大小，但是如果具有特定类名文本的特定或所有 td 变得比一行更长，如何自动使字体大小更小。
<div style="overflow: hidden;" id="parentDiv" class="scroll">
<div id="4" >
<table id="t4" class="Table">
<tbody>
<tr>
<td id="b4" class="bY"><table id="inner1" width="100%" cellpadding="3">
<tbody>
<tr>
<td class="code" id="code4" width="172"></td>
<td class="Num" id="Num4" width="50"></td>
<td colspan="2" class="Name" id="Name"></td>
</tr>
<tr>
<td class="code" width="172"> </td>
<td> </td>
<td class="serial" width="110"></td>
<td class="serial" width="322"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
采纳答案by gilly3
You want .filter(). For most elements this should work:
你要.filter()。对于大多数元素，这应该有效：
$(".myClass").filter(function()
{
var el = $(this);
el.css("white-space", "nowrap");
var lineHeight = el.height();
el.css("white-space", "");
return el.height() > lineHeight;
}).css("font-size", "10pt");
Dealing with tables, all the cells in a row have the same height, so check the value of a child element. Eg, wrap everything in a div. However, if you must act on a <td>directly:
处理表格时，一行中的所有单元格的高度都相同，因此请检查子元素的值。例如，将所有内容都包装在一个 div 中。但是，如果您必须<td>直接执行以下操作：
$(function()
{
$(".myClass td").filter(function()
{
var el = $(this);
el.closest("tr").andSelf().css("white-space", "nowrap");
var lineHeight = el.height();
el.css("white-space", "normal");
var textWraps = el.height() > lineHeight;
el.closest("tr").andSelf().css("white-space", "");
return textWraps;
}).css("font-size", "10pt");
});
回答by casablanca
There isn't a straightforward way to get the width (in pixels) of text content. You can however get a reasonable estimate by multiplying the number of characters by the average pixel width of each character - this will vary depending on the font, and works best for fixed-width fonts like Courier. This also assumes that all the content is simple text without additional formatting.
没有一种直接的方法来获取文本内容的宽度（以像素为单位）。但是，您可以通过将字符数乘以每个字符的平均像素宽度来获得合理的估计值 - 这将根据字体而有所不同，并且最适合像 Courier 这样的固定宽度字体。这也假设所有内容都是没有额外格式的简单文本。
Most fonts have a character width less than the height, so assuming width = height will definitely work.
大多数字体的字符宽度小于高度，因此假设宽度 = 高度肯定会起作用。
Example:
例子：
var fontSize = parseInt($('.my-td-class').css('font-size')); // get default font size
function updateFont() {
var e = $('#some-element');
while (e.text().length * fontSize > e.width()) {
fontSize *= 0.8; // reduce to 80%
e.css('font-size', fontSize + 'px');
}
}
Edit:Based on the other answers, you could apply this technique to the height as well. Just make sure that the width/height comparison reflects the current font size and not any hard-coded value.
编辑：根据其他答案，您也可以将此技术应用于高度。只需确保宽度/高度比较反映当前字体大小而不是任何硬编码值。
回答by Roadie57
var newFontSize = 8
if $('td').filter(function() {
return $(this).height() > 20
}).css("font-size", newFontSize);
Play with the height > 20 and newFontsize to get what you want.
使用 height > 20 和 newFontsize 来获得你想要的。
