更改字體大小，但保持按鈕大小相同

我正在顯示標籤作爲按鈕，我正在尋找一種方式，在內容很大時自動縮小字體大小。更改字體大小，但保持按鈕大小相同

目前我通過使用樣式來固定寬度和高度。

這裏是plunker鏈接，

https://plnkr.co/edit/brcTKRpS81DRYw9O1yDX?p=preview

.label-list { 
margin: 5px 5px 5px 0; 
border-radius: 0; 
font-size: 12px; 
background-color: #ececec; 
border-color: #e8e8e8; 
color: #444; 
width:120px; 
height:45px; 
text-align:center; 
}

來源

2017-01-11 shazia perween

等待我將修改它，閱讀它錯誤地 – FreedomPride

按鈕寬度不應該甚至大含量的變化，而不是我想要的字體大小應適當減少 –

你不能只用CSS做到這一點。你需要JavaScript。 –

設置寬度或高度自動響應能力像你想要的。

<head> 
    <meta charset="utf-8" /> 
    <title>Bootstrap, from Twitter</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 
    <!-- Le styles --> 
    <link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" /> 
    <link data-require="[email protected]*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> 
    <style> 
    .label-list { 
    margin: 5px 5px 5px 0; 
    border-radius: 0; 
    font-size: 12px; 
    background-color: #ececec; 
    border-color: #e8e8e8; 
    color: #444; 
    width:auto; 
    height:45px; 
    text-align:center; 
    } 
    </style> 
    <script data-require="jquery" data-semver="3.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
    <script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
    </head> 

    <body> 
    <label class="btn btn-primary label-list">test label</label> 
    <label class="btn btn-primary label-list">test label test test test</label> 
    </body> 

</html>

來源

2017-01-11 03:15:34 FreedomPride

我想要的按鈕寬度不應該改變 –

我只能建議你使用這個：https://discourse.wicg.io/t/auto-sizing-text-to-fit-container/1053 – FreedomPride

非常感謝@FreedomPride，我會做的 –

這裏是你在CSS 字體大小變化：3vw; 寬度：自動;

viewport

來源

2017-01-11 06:41:27 pratik

更改字體大小，但保持按鈕大小相同

回答

相關問題