更改文本大小以适合html中的按钮宽度

时间:2015-09-30 04:38:19

标签: html css

他们以任何方式在html或css中更改文本大小,以便在宽度根据容器更改的按钮中使用它。我有3个相同宽度的按钮,第3个文字有点小,如果按钮缩小,它的2个字母将会从按钮中移出。

2 个答案:

答案 0 :(得分:0)

不,通过HTML + CSS无法实现。您只能添加一些JavaScript计时器来跟踪按钮宽度并自动调整文本大小,然后更改。

此外,您可以在不同的页面大小上添加一些详细的Media Queries来更改按钮样式。

答案 1 :(得分:0)

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>

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

enter image description here