如何自动调整文本按钮

嗨我正在使用twiiter bootsrap 2.6为我的网络应用程序。你可以在这个小提琴的用户选项卡中看到这个finalhhhhhhhhhhhhhhhhhhh导致按钮宽度的增加，这也增加了列宽。我想制作相同大小的所有按钮如果文本长度增加，则按钮宽度不应增加。文本大小应自动调整以使按钮宽度恒定。请告诉我该怎么做？

这是html按钮请参见截图

Answer 1

所以你想根据文字长度减少字体大小？

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

请在下面的评论中看到好词

…但是imo有更好的UI解决方案：

1. 将按钮文本截断为最大允许字符+＆hellip; 并将“alt”属性设置为全文。
2. 在鼠标hover时使文本在按钮中从右向左滚动。
3. 在按钮内进行文本换行。

Answer 2

在css中添加一个类，如下所示：

 .btn-fixed-width { width:60px; overflow:hidden; } 

当然，用您想要使用的特定宽度替换宽度，将该类添加到您想要固定宽度的按钮，然后就可以了！

Answer 3

首先得到文本长度

 var get = $("#value").val().length; 

然后在设置固定宽度到按钮之前，获取最大尺寸表示按钮的宽度

 maxScale = $("#value").width(); 

然后只需减少字体大小

通过比较两者和if设置fontsize

 if ( currentFontSize < maxSize ) { currentFontSize += .1; $("button").css('font-size', fontSize + 'px'); 

试试这个 ...