javascript - 如何使文本按钮自动调整

Question

您好，我正在为我的网络应用程序使用 twiiter bootsrap 2.6。正如您在此 fiddle 的用户选项卡中看到的那样此 finalhhhhhhhhhhhhhhhhhhh 导致按钮宽度增加，这也增加了列宽。我想使所有按钮大小相等，如果文本长度增加，则按钮宽度不应增加。文本大小应自动调整以使按钮宽度保持不变。请告诉我该怎么做？

这是html按钮请看截图

<input type='button' class='btn btn-lg btn-primary' value="finalhhhhhhhhhhhhhhhhhhh" />

Answer 1

所以您想根据文本长度减小字体大小？

如果是这样，我建议首先使用 css 将按钮宽度设置为固定像素宽度。这样你的按钮就不会晃动。然后在每次更改文本时，您可以创建另一个按钮(没有固定宽度)，设置新文本，测量它的宽度，然后循环将字体大小减小一个最小单位(em vs px)，直到按钮宽度在所需参数范围内。然后删除新创建的按钮并将您的第一个按钮的字体大小设置为您刚刚计算的字体大小。这个操作会发生得非常快，用户不会看到它，jquery 也使用这个技巧来计算一些尺寸。

请在下面的评论中查看 FIDDLE

...但是我有更好的 UI 解决方案:

1. 将按钮文本 chop 为允许的最大字符数 + …并将“alt”属性设置为全文。
2. 使文本在鼠标悬停时从右向左滚动。
3. 让文字在按钮内换行。