當我讓我的窗口變小時，從按鈕切斷的字母

Question

我的窗口變小時，我的按鈕上的字母就會被切斷。我不知道如何實施解決方案。我已經提供了CSS和HTML。我也提供了更好的理解。 我知道我必須改變或添加的東西在CSS中，但我不知道是什麼。

我不知道如何實施解決方案。我已經提供了CSS和HTML。我也提供了更好的理解。

.button { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t cursor: pointer; 
 
\t outline: none; 
 
\t white-space: nowrap; 
 
// \t margin: 5px; 
 
\t padding: 0 22px; 
 
\t font-size: 14px; 
 
\t font-family: 'Roboto', sans-serif, 'Lato'; 
 
\t height: 40px; 
 
    width: 220px; 
 
\t line-height: 40px; 
 
\t background-color: #428bca; 
 
\t color: #FFF; 
 
\t font-weight: 600; 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 1px; 
 
\t border: none; 
 
\t text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 
 
    margin: 0 auto; 
 
    text-align: center; 
 

 
} 
 
.panel-title { 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    font-size: 16px; 
 
    color: #ffffff; 
 
} 
 

 
.panel-heading { 
 

 
    color: #428bca; 
 
    background-color: #428bca; 
 
    border-top: 1px solid #dddddd; 
 
    \t border-left: 1px solid #dddddd; 
 
    border-right: 1px solid #dddddd; 
 
    //border-top-right-radius: 3px; 
 
    //border-top-left-radius: 3px; 
 
} 
 

 
.panel-body { 
 
    padding: 15px; 
 
    border: 1px solid #dddddd; 
 
} 
 
.nobottommargin { 
 
    margin-bottom: 0 !important; 
 
} 
 
.leftmargin-sm { 
 
    margin-left: 30px !important; 
 
} 
 

 
.button.button-rounded { 
 
\t border-radius: 3px; 
 
} 
 

 
.button.button-reveal { 
 
\t padding: 0 28px; 
 
\t overflow: hidden; 
 
} 
 

 
.button.button-large { 
 
\t padding: 0 26px; 
 
\t font-size: 16px; 
 
\t height: 46px; 
 
\t line-height: 46px; 
 
} 
 

 
.button-teal { 
 
\t background-color: #428bca; 
 
} 
 

 
/*code for the icon */ 
 
.button-reveal i { 
 
    position: absolute; 
 
    width: 2em; 
 
    height: 100%; 
 
    line-height: 45px; 
 
    background-color: rgba(0, 0, 0, .2); 
 
    text-align: center; 
 
    left: -100%; 
 
    transition: left 0.25s ease; 
 
} 
 
.button-reveal:hover i { 
 
    left: 0; 
 
} 
 
/* code for the letters*/ 
 
.button-reveal span { 
 
    display: inline-block; 
 
    margin: 0 2em; 
 
    transition: margin 0.35s ease; 
 
} 
 
.button-reveal:hover span { 
 
    margin: 0 1em 0 3em; 
 
}

<div class="panel-heading"> 
 
\t \t \t \t \t \t \t \t <h2 class="panel-title">Access This Service</h2> 
 
\t \t \t \t \t \t \t </div> 
 

 
<div class="panel-body"> 
 
    <!-- angular --> 
 
    \t \t 
 
    <div ng-if="c.html" ng-bind-html="c.html"></div> 
 

 
<a href="http://zoom.us" class="button button-rounded button-reveal button-large button-teal"><i class="fa fa-forward" aria-hidden="true"></i> 
 
    <span>Go there now!</span></a><br> 
 

 
Note: If you haven’t accessed Zoom before, create a new account at <a href="http://zoom.us">zoom.us</a>. 
 
</div>

Answer 1

只需添加min-width到您的按鈕，它會被罰款

.button { 
 
    display: inline-block; 
 
    position: relative; 
 
    cursor: pointer; 
 
    outline: none; 
 
    white-space: nowrap; 
 
    // \t margin: 5px; 
 
    padding: 0 22px; 
 
    font-size: 14px; 
 
    font-family: 'Roboto', sans-serif, 'Lato'; 
 
    height: 40px; 
 
    width: 220px; 
 
    line-height: 40px; 
 
    background-color: #428bca; 
 
    color: #FFF; 
 
    font-weight: 600; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    border: none; 
 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
.panel-title { 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    font-size: 16px; 
 
    color: #ffffff; 
 
} 
 

 
.panel-heading { 
 
    color: #428bca; 
 
    background-color: #428bca; 
 
    border-top: 1px solid #dddddd; 
 
    border-left: 1px solid #dddddd; 
 
    border-right: 1px solid #dddddd; 
 
    //border-top-right-radius: 3px; 
 
    //border-top-left-radius: 3px; 
 
} 
 

 
.panel-body { 
 
    padding: 15px; 
 
    border: 1px solid #dddddd; 
 
} 
 

 
.nobottommargin { 
 
    margin-bottom: 0 !important; 
 
} 
 

 
.leftmargin-sm { 
 
    margin-left: 30px !important; 
 
} 
 

 
.button.button-rounded { 
 
    border-radius: 3px; 
 
} 
 

 
.button.button-reveal { 
 
    padding: 0 28px; 
 
    overflow: hidden; 
 
} 
 

 
.button.button-large { 
 
    padding: 0 26px; 
 
    font-size: 16px; 
 
    height: 46px; 
 
    line-height: 46px; 
 
} 
 

 
.button-teal { 
 
    background-color: #428bca; 
 
} 
 

 

 
/*code for the icon */ 
 

 
.button-reveal i { 
 
    position: absolute; 
 
    min-width: 2em; 
 
    height: 100%; 
 
    line-height: 45px; 
 
    background-color: rgba(0, 0, 0, .2); 
 
    text-align: center; 
 
    left: -100%; 
 
    transition: left 0.25s ease; 
 
} 
 

 
.button-reveal:hover i { 
 
    left: 0; 
 
} 
 

 

 
/* code for the letters*/ 
 

 
.button-reveal span { 
 
    display: inline-block; 
 
    margin: 0 2em; 
 
    transition: margin 0.35s ease; 
 
} 
 

 
.button-reveal:hover span { 
 
    margin: 0 1em 0 3em; 
 
}

<div class="panel-heading"> 
 
    <h2 class="panel-title">Access This Service</h2> 
 
</div> 
 

 
<div class="panel-body"> 
 
    <!-- angular --> 
 

 
    <div ng-if="c.html" ng-bind-html="c.html"></div> 
 

 
    <a href="http://zoom.us" class="button button-rounded button-reveal button-large button-teal"><i class="fa fa-forward" aria-hidden="true"></i> 
 
    <span>Go there now!</span></a><br> Note: If you haven’t accessed Zoom before, create a new account at <a href="http://zoom.us">zoom.us</a>. 
 
</div>

Answer 2

一種可能的途徑是使用@media query控制何時被調整大小一定的寬度低於該窗口的按鈕填充和其它風格屬性。

考慮以下幾點：

@media (max-width: 800px) { 
    .button.test { 
    padding: 0px; 
    } 
} 

這表示，如果窗口低於800px設置padding 0與button和test樣式類的元素。當窗口的寬度大於800px時，此選擇器不適用。

下面的代碼片段顯示了一個按鈕，帶有或不帶有@media查詢的應用程序。我將查詢放在樣式表的末尾，以便padding不會被其他類重寫。您也可以將它放在文件的頂部，但需要小心，這樣級聯順序不會覆蓋您的樣式。

查看內聯代碼片段，然後單擊「完整頁面」查看第二個按鈕上的填充更改。

.button { 
 
    display: inline-block; 
 
    position: relative; 
 
    cursor: pointer; 
 
    outline: none; 
 
    white-space: nowrap; 
 
    padding: 0 22px; 
 
    font-size: 14px; 
 
    font-family: 'Roboto', sans-serif, 'Lato'; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    background-color: #428bca; 
 
    color: #FFF; 
 
    font-weight: 600; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    border: none; 
 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
.panel-heading { 
 
    color: #428bca; 
 
    background-color: #428bca; 
 
    border-top: 1px solid #dddddd; 
 
    border-left: 1px solid #dddddd; 
 
    border-right: 1px solid #dddddd; 
 
    //border-top-right-radius: 3px; 
 
    //border-top-left-radius: 3px; 
 
} 
 

 
.panel-body { 
 
    padding: 15px; 
 
    border: 1px solid #dddddd; 
 
} 
 

 
.nobottommargin { 
 
    margin-bottom: 0 !important; 
 
} 
 

 
.leftmargin-sm { 
 
    margin-left: 30px !important; 
 
} 
 

 
.button.button-rounded { 
 
    border-radius: 3px; 
 
} 
 

 
.button.button-reveal { 
 
    padding: 0 28px; 
 
    overflow: hidden; 
 
} 
 

 
.button.button-large { 
 
    padding: 0 26px; 
 
    font-size: 16px; 
 
    height: 46px; 
 
    line-height: 46px; 
 
} 
 

 
.button-teal { 
 
    background-color: #428bca; 
 
} 
 

 

 
/*code for the icon */ 
 

 
.button-reveal i { 
 
    position: absolute; 
 
    width: 2em; 
 
    height: 100%; 
 
    line-height: 45px; 
 
    background-color: rgba(0, 0, 0, .2); 
 
    text-align: center; 
 
    left: -100%; 
 
    transition: left 0.25s ease; 
 
} 
 

 
.button-reveal:hover i { 
 
    left: 0; 
 
} 
 

 

 
/* code for the letters*/ 
 

 
.button-reveal span { 
 
    display: inline-block; 
 
    margin: 0 2em; 
 
    transition: margin 0.35s ease; 
 
} 
 

 
.button-reveal:hover span { 
 
    margin: 0 1em 0 3em; 
 
} 
 

 
@media (max-width: 800px) { 
 
    .button.test { 
 
    padding: 0px !important; 
 
    } 
 
}

<div>Button NOT affected by @media</div> 
 

 

 
<a href="http://zoom.us" class="button button-rounded button-reveal button-large button-teal"><i class="fa fa-forward" aria-hidden="true"></i> 
 
    <span>Go there now!</span></a> 
 

 
<div style="margin-top:20px;">Button affected by @media</div> 
 

 
<a href="http://zoom.us" class="button test button-rounded button-reveal button-large button-teal"><i class="fa fa-forward" aria-hidden="true"></i> 
 
    <span>Go there now!</span></a>