更改文本大小以适应 html 中的按钮宽度 [重复]答案

【问题标题】：Alter text size to fit button width in html [duplicate]更改文本大小以适应 html 中的按钮宽度 [重复]
【发布时间】：2015-12-27 18:09:50
【问题描述】：

他们是否在 html 或 css 中以任何方式更改文本大小以适应其宽度根据容器而变化的按钮。我有 3 个相同宽度的按钮，第 3 个文本有点小，如果按钮缩小，它的 2 个字母会超出按钮。

【问题讨论】：

请先在此处发布您的代码，只有这样才能帮助您。

标签： html css

【解决方案1】：

SVG 可以在这里提供帮助。考虑以下几点：

<button style="position: relative; width: 400px; height: 200px; ">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 100 50">
    <text y="50%" x="50%" text-anchor="middle" font-size="20">FOOBAR</text>
  </svg>
</button>

font-size="20" 中的20 指的是viewBox 指定的坐标，因此字体大小将是按钮大小的1/5 (20/100)。当然，这并不能完全解决您确保文本适合按钮的问题，但是如果您对字符数有一个大致的了解，您可以选择字体大小以使该字符数可能适合。

【讨论】：

【解决方案2】：

不，通过 HTML + CSS 是不可能的。您只能添加一些 JavaScript 计时器来跟踪按钮宽度并自动调整文本大小，然后它会改变。

另外，您可以添加一些详细的Media Queries 以更改不同页面大小的按钮样式。

【讨论】：