'changing font size but keeping button size same

I am displaying label as a button and I am looking for a way where automatically font size should decrease whenever content is big.

Currently I am fixing the width and height by using styles.

Here is plunker link,

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;
}
csstwitter-bootstrap-3


Solution 1:[1]

Set the width or height to auto for responsiveness like you wanted. 

  <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="bootstrap@*" 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>

Solution 2:[2]

here is your change in css font-size:3vw; width:auto;

viewport

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 FreedomPride
Solution 2 Glorfindel

Related Questions