Question

我有3个HTML按钮。

<button class='btn btn-default'>A</button>
<button class='btn btn-default'>ABCDEFG</button>
<button class='btn btn-default'>B</button>

我希望每个按钮都有一个固定的宽度，例如。 38px。当我设置css

.btn { width: 38px; }

它可以工作，但第二个按钮的文字溢出。我怎么能用css解决这个问题？文字应该适合不相反的按钮。

修改

感谢您的回答。我希望文本适合按钮。适合我的意思是它不应该隐藏。它应该变小。

Answer 1

您只需添加＆＃34; overflow：hidden＆＃34;即可完成此操作。到你的btn课程。在下面的片段中，我包括了＃34; white-space：nowrap＆＃34;强制名称在一行而不是包装和＆＃34;文本溢出：省略号＆＃34;这样它就会在标签的末尾添加省略号以显示更多内容。我不知道你的申请是什么，但这些都是你可以做的事情。

＆＃13;

.btn {
  width: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

＆＃13;

<button class='btn btn-default'>A</button>
<button class='btn btn-default'>ABCDEFG</button>
<button class='btn btn-default'>B</button>

＆＃13;

或者，如果高度可以调节，那么你可以使用＆＃34;自动换行：break-word＆＃34;允许字母堆叠。

＆＃13;

.btn {
  width: 50px;
  word-wrap: break-word;
  overflow: hidden;
}

＆＃13;

<button class='btn btn-default'>A</button>
<button class='btn btn-default'>ABCDEFG</button>
<button class='btn btn-default'>B</button>

＆＃13;

修改既然你问过基于按钮缩放字体的问题，那就不能单独使用CSS了（我想我们将来能够scale widths using the viewport）。目前，这是我创建的JavaScript / jQuery代码段，可以满足您的需求。

＆＃13;
＆＃13;
$('.btn').each(function() { var bw = $(this).width(); //Button's inner width, not including padding var tw = $(this).children('span').outerWidth(true); //Text's width var c = $(this).text().length; //Number of characters in label var cw = tw / c; //Average width of each character var max = Math.floor(bw / cw); //Maximum number of characters that can be visible, rounding down to the nearest whole number //If there are too many characters, then apply the shrinking formula if (c > max) { var font = parseFloat($(this).css('font-size'), 10); //Get the CSS font-size as a number (in this case, it should be "16") var new_cw = bw / c; //How much average space each character SHOULD take up in the button font = font * new_cw / cw;//Typical "proportions" formula to get the scaled font size $(this).css('font-size', font + 'px'); //Apply new font size to this button } });
＆＃13;
.btn { display: inline-block; vertical-align: top; width: 50px; height: 30px; overflow: hidden; white-space: nowrap; font-size: 16px; line-height: 22px; } .btn span { line-height: normal; vertical-align: middle; } .btn.big { width: 70px; } .btn.biggest { width: 80px; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class='btn btn-default'><span>A</span></button> <button class='btn btn-default'><span>AB</span></button> <button class='btn btn-default'><span>ABC</span></button> <button class='btn btn-default'><span>ABCD</span></button> <button class='btn btn-default'><span>ABCDE</span></button> <button class='btn btn-default'><span>ABCDEF</span></button> <br /> <br /> <button class='btn big btn-default'><span>ABCD</span></button> <button class='btn big btn-default'><span>ABCDE</span></button> <button class='btn big btn-default'><span>ABCDEF</span></button> <button class='btn big btn-default'><span>ABCDEFG</span></button> <button class='btn big btn-default'><span>ABCDEFGH</span></button> <button class='btn big btn-default'><span>ABCDEFGHH</span></button> <br /> <br /> <button class='btn biggest btn-default'><span>ABCD</span></button> <button class='btn biggest btn-default'><span>ABCDE</span></button> <button class='btn biggest btn-default'><span>ABCDEF</span></button> <button class='btn biggest btn-default'><span>ABCDEFG</span></button> <button class='btn biggest btn-default'><span>ABCDEFGH</span></button> <button class='btn biggest btn-default'><span>ABCDEFGHH</span></button> <button class='btn biggest btn-default'><span>ABCDEFGHHH</span></button> <button class='btn biggest btn-default'><span>ABCDEFGHHHH</span></button> <button class='btn biggest btn-default'><span>ABCDEFGHHHHH</span></button>
＆＃13;
＆＃13;
＆＃13;

在这个片段中，我还设置了不同的按钮宽度，因此这段代码应该非常适合不同大小的按钮。当我说＆＃34;典型＆＃34;比例＆＃34;式＆＃34;在评论中我指的是这个公式：

A over B is equal to C over D，其中A是当前字符宽度（本例中约为11），B是当前字体大小（本例中为16），C是适合按钮的新字符宽度（已计算） as＆＃34; new_cw＆＃34;），我们通过将B和C相乘并除以A来求解新字体大小D.

是的数学！

Answer 2

添加word-wrap

＆＃13;

button {
  width: 38px;
  word-wrap: break-word;
}

＆＃13;

<button class='btn btn-default'>A</button>
<button class='btn btn-default'>ABCDEFG</button>
<button class='btn btn-default'>B</button>

＆＃13;

根据父按钮进行文本化

2 个答案: