如何自动调整文本按钮

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也使用这个技巧来计算一些大小。

请在下面的评论中看到小费

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

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

Answer 2

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

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

当然，用你想要使用的特定宽度替换宽度， 将该类添加到要固定宽度的按钮 你有它！

Answer 3

首先通过

获取文本长度

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

然后在设置固定宽度按钮

之前，获取最大尺寸表示按钮宽度

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

然后只需按

缩小字体大小

通过比较两者来设置fontsize

if ( currentFontSize < maxSize ) {
                            currentFontSize += .1;

 $("button").css('font-size', fontSize + 'px');

试试这个......