虛擬機中指定的按鈕具有溢出文字

Question

我有一個按鈕，它具有在vm中指定的大小。裏面的文字也有vm中指定的字體大小。當按鈕變得小於給定大小時，文本溢出容器並在按鈕下方溢出。我怎樣才能解決這個問題？ （我打算使用媒體查詢，這樣按鈕不會變得非常小，但當按鈕的大小適中時，這並不能解決問題。

我的HTML如下：

<div class="socialMediaBtn" id="githubBtn"> 
    <a href="#"><i class="fa fa-github"></i> Github </a> 
</div> 

而且我的CSS：

.socialMediaBtn { 
    font-size: 1.25vw; 
    border-radius: 10px; 
    width: 15vw; 
    height: 2.75vw; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 50px; 
    display: inline-block; 
    color: #003333; 
    background-color: white; 
    padding: 0px; 
    overflow: hidden; 
} 

.socialMediaBtn > a { 
    text-decoration: none; 
    color: #003333; 
    height: 2.75vw; 
    width: 15vw; 
    display: block; 
    border-radius: 10px; 
} 

.socialMediaBtn > a:hover { 
    background-color: #669999; 
    color: white; 
} 

我也有那個進口字體awesome.min.css頁面頂部的鏈接標籤。

這是一個jsFiddle，嘗試調整窗口的大小來查看問題。 https://jsfiddle.net/1pwyn5ko/。 （在我的網頁上，按鈕的文本實際上是可見的，而不是消失，除非我給這個div溢出：隱藏的CSS屬性）。

Answer 1

你有一個動態高度（height: 2.75vw;），但是你有一個固定的行高（line-height: 50px;）。

只需將您的行高設置爲相同的動態高度，您就可以輕鬆前往！

.socialMediaBtn { 
    font-size: 1.25vw; 
    border-radius: 10px; 
    width: 15vw; 
    height: 2.75vw; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 2.75vw; 
    display: inline-block; 
    color: #003333; 
    background-color: white; 
    padding: 0px; 
    overflow: hidden; 
} 

請參閱更新的小提琴：https://jsfiddle.net/1pwyn5ko/1/