Question

我正在将标签显示为按钮，我正在寻找一种方法，只要内容很大，自动字体大小就会减少。

目前我正在使用样式修复宽度和高度。

这是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;
}

Answer 1

根据需要将宽度或高度设置为自动以获得响应。

  <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>

Answer 2

这是你对css的改变字体大小：3vw; 宽度：汽车;

viewport

更改字体大小但保持按钮大小相同

2 个答案: