将文本大小更改为不超过表单输入的宽度答案

【问题标题】：Change text size to not exceed width of form input将文本大小更改为不超过表单输入的宽度
【发布时间】：2013-05-28 05:30:08
【问题描述】：

我有一个跨越页面宽度的表单<input>，字体大小为2em（我们称之为基本字体大小）。

如果输入的文本超过字段的宽度，我不希望它被截断/溢出，所以我的问题是：如何检测字段文本何时溢出字段并降低font-size 所以它都在视图中？ 相反，我如何检测用户何时开始删除字符并反过来增加 font-size，但不高于基本字体大小？

非常感谢任何帮助。

【问题讨论】：

【解决方案1】：

这就是你需要的。

<input type="text" name="younameit" id="demo">
$('#demo').inputfit();

而且，这些 css 属性将有助于在字体大小发生变化时保持输入的大小。

min-height: 30px;
min-width: 500px;
line-height: 30px;

【讨论】：

该插件所做的可能是唯一可能的解决方案：将字段的内容克隆到 div 中，并与字段的宽度进行比较，尝试考虑边距/填充/边框。（我添加这个注释是因为这是一个非 jQuery 问题的 jQuery 答案，所以那些不想要 jQuery 的人可以知道应该做什么）。