根據父按鈕的文本大小

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>