根据父按钮的文本大小

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

你可以简单地通过增加 “溢出：隐藏” 做到这一点你BTN类。在下面的代码片段中，我包含了“white-space：nowrap”来强制名称在一行而不是包装和“text-overflow：ellipsis”，这样它会在标签的末尾添加省略号以显示是更多。我不知道你的申请是什么，但这些都是你可以做的事情。

.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来完成，但（我想我们就可以在未来，因为我们已经可以scale widths using the viewport）。现在，我们创建了一个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 over B is equal to C over D，其中A是当前字符宽度（约11在该示例中），B是当前字体大小（16在这个例子中），C是适合按钮的新字符宽度（计算为“new_cw”），并且我们通过将B和C相乘并除以A来求解D，新的字体大小。

耶！数学！

Answer 2

添加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>