html - 根据父按钮的文本大小

Question

我有 3 个 HTML 按钮。

<button class='btn btn-default'>A</button>
<button class='btn btn-default'>ABCDEFG</button>
<button class='btn btn-default'>B</button>

我想要每个按钮的固定宽度，例如。 38px。当我设置 css 时

.btn { width: 38px; } 

它可以工作，但是第二个按钮的文本会溢出。我怎样才能用CSS解决这个问题？文本应适合按钮而不是相反。

编辑

感谢您的回答。我希望文本适合按钮。适合我的意思是它不应该隐藏。它应该变小。

Answer 1

您只需将“溢出:隐藏”添加到您的 btn 类即可完成此操作。在下面的代码片段中，我添加了“white-space: nowrap”以强制名称在一行中而不是换行，以及“text-overflow: ellipsis”以便它会在标签的末尾添加一个省略号以显示在那里更多。我不知道你的应用程序是什么，但这些是你可以做的事情。

.btn {
  width: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<button class='btn btn-default'>A</button>
<button class='btn btn-default'>ABCDEFG</button>
<button class='btn btn-default'>B</button>

或者，如果高度可以调整，那么你可以使用“word-wrap: break-word”让字母堆叠。

.btn {
  width: 50px;
  word-wrap: break-word;
  overflow: hidden;
}

<button class='btn btn-default'>A</button>
<button class='btn btn-default'>ABCDEFG</button>
<button class='btn btn-default'>B</button>

编辑既然你询问了基于按钮缩放字体，那还不能单独用 CSS 来完成(我想我们将来可以，因为我们已经可以了 scale widths using the viewport )。现在，这是我创建的一个 JavaScript/jQuery 片段，可以满足您的需要。

$('.btn').each(function() {
  var bw = $(this).width(); //Button's inner width, not including padding
  var tw = $(this).children('span').outerWidth(true); //Text's width
  var c = $(this).text().length; //Number of characters in label
  var cw = tw / c; //Average width of each character
  var max = Math.floor(bw / cw); //Maximum number of characters that can be visible, rounding down to the nearest whole number
  //If there are too many characters, then apply the shrinking formula
  if (c > max) {
    var font = parseFloat($(this).css('font-size'), 10); //Get the CSS font-size as a number (in this case, it should be "16")
    var new_cw = bw / c; //How much average space each character SHOULD take up in the button
    font = font * new_cw / cw;//Typical "proportions" formula to get the scaled font size
    $(this).css('font-size', font + 'px'); //Apply new font size to this button
  }
});

.btn {
  display: inline-block;
  vertical-align: top;
  width: 50px;
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 16px;
  line-height: 22px;
}

.btn span {
  line-height: normal;
  vertical-align: middle;
}

.btn.big {
  width: 70px;
}

.btn.biggest {
  width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btn btn-default'><span>A</span></button>
<button class='btn btn-default'><span>AB</span></button>
<button class='btn btn-default'><span>ABC</span></button>
<button class='btn btn-default'><span>ABCD</span></button>
<button class='btn btn-default'><span>ABCDE</span></button>
<button class='btn btn-default'><span>ABCDEF</span></button>
<br />
<br />
<button class='btn big btn-default'><span>ABCD</span></button>
<button class='btn big btn-default'><span>ABCDE</span></button>
<button class='btn big btn-default'><span>ABCDEF</span></button>
<button class='btn big btn-default'><span>ABCDEFG</span></button>
<button class='btn big btn-default'><span>ABCDEFGH</span></button>
<button class='btn big btn-default'><span>ABCDEFGHH</span></button>
<br />
<br />
<button class='btn biggest btn-default'><span>ABCD</span></button>
<button class='btn biggest btn-default'><span>ABCDE</span></button>
<button class='btn biggest btn-default'><span>ABCDEF</span></button>
<button class='btn biggest btn-default'><span>ABCDEFG</span></button>
<button class='btn biggest btn-default'><span>ABCDEFGH</span></button>
<button class='btn biggest btn-default'><span>ABCDEFGHH</span></button>
<button class='btn biggest btn-default'><span>ABCDEFGHHH</span></button>
<button class='btn biggest btn-default'><span>ABCDEFGHHHH</span></button>
<button class='btn biggest btn-default'><span>ABCDEFGHHHHH</span></button>

在这段代码中，我还设置了不同的按钮宽度，因此这段代码应该非常适合不同大小的按钮。当我在评论中说“典型的“比例”公式”时，我指的是这个公式:

A over B is equal to C over D ，其中 A 是当前字符宽度(本例中约为 11)，B 是当前字体大小(本例中为 16)，C 是适合按钮的新字符宽度(计算为“new_cw”)，我们正在通过将 B 和 C 相乘并除以 A 来求解新字体大小 D。

耶数学!