如何使文本按钮自动调整 [英] how to make automatic adjustment of text button

问题描述

您好！我对我的网络应用使用twiiter bootsrap 2.6。如您在此的用户标签中所看到的fiddle
这个 finalhhhhhhhhhhhhhhhhhhh 导致按钮的宽度增加，这也增加了列宽。我想使所有的按钮大小相等，如果文本长度增加，则按钮宽度不应该增加。文本大小应该自动调整以使常量按钮宽度。请告诉我如何做这个？

Hi I am using twiiter bootsrap 2.6 for my web app.As you can see in the user tab of this fiddle This finalhhhhhhhhhhhhhhhhhhh causes increase of the width of the button which also increases the column width.I want to make all the buttons of equal size and if the text length increases then the button width should not increase.The text size should automatically adjust to make the constant button width.Please tell me how to do this?

是html按钮
请参阅截图

This is the html button Please see the screenshot

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

推荐答案

因此，您希望根据文本长度减小字体？

So you want to decrease font size based on text length?

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

If so, I recommend firstly set your button width to a fixed pixel width with css. This way your button will not jiggle. Then on every text change you can create another button (without fixed width), set new text, measure it's width, then in loop decrease font size by a minimal unit (em vs px) until button width is within needed parameter. Then delete the newly created button and set your first button's font size to the one you've just calculated. This operation will happen really fast and user will not see it, jquery uses this trick to calculate some sizes as well.

请在下面的注释中查看FIDDLE

PLEASE SEE FIDDLE IN THE COMMENTS BELOW

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

... But imo there are better UI solutions to this:

1. 截断按钮文本允许的最大字符数+& hellip;


2. 在鼠标悬停时使文字在按钮中左右滚动。


3. 在按钮内使文本换行。 / li>
   

1. Truncate button text to max allowed characters + … and set "alt" attribute to full text.
2. Make text scroll in button right to left on mouseover.
3. Make text wrap within button.

这篇关于如何使文本按钮自动调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！