根据父按钮的Textsize
根据父按钮的Textsize
提问于 2017-04-19 19:23:24
我有3个HTML按钮。
<button class='btn btn-default'>A</button>
<button class='btn btn-default'>ABCDEFG</button>
<button class='btn btn-default'>B</button>我希望每个按钮都有固定的宽度。38便士当我设置css时
.btn { width: 38px; } 它可以工作，但来自第二个按钮的文本溢出。我如何用css来解决这个问题？文本应该放在按钮中，而不是相反。
编辑
谢谢你的回答。我要把文字放进按钮里。我的意思是它不应该藏起来。它应该变小。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-04-19 19:33:15
您可以简单地通过在btn类中添加“溢出:隐藏”来实现这一点。在下面的片段中，我包含了“空格:现在说唱”，以强制名称放在一行中而不是包装和“文本溢出:省略”，以便它将添加一个省略号在标签的末尾，以显示有更多。我不知道你申请的是什么，但这些都是你可以做的。
.btn {
width: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}<button class='btn btn-default'>A</button>
<button class='btn btn-default'>ABCDEFG</button>
<button class='btn btn-default'>B</button>
或者，如果高度可以调整，那么您可以使用“字包装:断字字”来允许字母堆叠。
.btn {
width: 50px;
word-wrap: break-word;
overflow: hidden;
}<button class='btn btn-default'>A</button>
<button class='btn btn-default'>ABCDEFG</button>
<button class='btn btn-default'>B</button>
编辑了，因为您询问了如何根据按钮缩放字体，这还不能仅用CSS完成(我想我们将来将能够实现，因为我们已经可以使用视口的缩放宽度)。现在，我创建了一个JavaScript/jQuery片段来满足您的需要。
$('.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
}
});.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;
}<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>
在这个片段中，我还设置了不同的按钮宽度，所以这段代码应该非常适合不同大小的按钮。当我在评论中说“典型的”比例“公式”时，我指的是这个公式：
A上B等于C对D，其中A是当前字符的宽度(在本例中约为11 )，B是当前的字体大小(本例中为16)，C是适合按钮内的新字符宽度(计算为"new_cw")，我们正在通过乘以B和C并除以A来求解D，即新的字体大小。
好数学！
Stack Overflow用户
发布于 2017-04-19 19:27:33
添加word-wrap
button {
width: 38px;
word-wrap: break-word;
}<button class='btn btn-default'>A</button>
<button class='btn btn-default'>ABCDEFG</button>
<button class='btn btn-default'>B</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43504387
复制相关文章
相似问题
腾讯云开发者
