4

Is their any way in html or css to change the text size in order to fit it with in the button of whose width changes according to container. I have 3 buttons of same width, the 3rd text is a little small and its 2 letters will go out of the button if the button shrinks.

TryinHard
  • 4,078
  • 3
  • 28
  • 54
suhail c
  • 1,169
  • 2
  • 16
  • 40

2 Answers2

0

No, it is not possible via HTML + CSS. You could only add some JavaScript timer to trace button width and auto adjust text size, then it changes.

Also, you may add some detailed Media Queries to change button style on different page size.

IonDen
  • 773
  • 5
  • 15
0

SVG can help here. Consider the following:

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

The 20 in font-size="20" refers to coordinates as specified by viewBox, so the font size will be 1/5 (20/100) of the size of the button. Of course, this does not precisely solve your problem of ensuring that the text fits in the button, but if you have a general idea of the number of characters, you can choose font size such that that number of characters is likely to fit.

enter image description here