is there is way to make text fill the button size using css or html only?

Question

i am trying to make responsive button with text on it but i couldn't make the text stay in the button size using css and html only

body {
  margin: 0;
}

.button {
  float: left;
  width: 20vw;
  height: 20vh;
  text-align: center;
  font-size: 6vmin;
  font-weight: bold;
}

<!DOCTYPE html>
<html>

<head>
  <link rel='stylesheet' type='text/css' href='chatstyle.css'>
</head>

<body>
  <button class="button">justlongtext</button>
</body>

using this code and then try to resize the window for example to 190px 310px the text will go out of the button

You mean to make the text smaller as the button go smaller right? — Toan Lu, Dec 22 '18 at 16:40
@ToanLu yes right smaller or bigger in the width and height size of the button — مهند عبد الجليل, Dec 26 '18 at 14:46

score 1 · Answer 1 · edited Oct 31 '21 at 20:03

If you set the width and height of button so when the text is larger than button, it will overflow. You can fix it by setting only one dimension (only width or only height). Instead of second dimension you add some padding to make button look nice:

.only-height {
    height: 50px;
}

.only-width {
    width: 100px;
}

<button class="only-height">This is very long text, but it won't overflow because only the height is set.</button>
<br>
<button class="only-width">This is very long text, but it won't overflow because only the width is set.</button>

If you want to resize the text by the size of the button I would recommended you to use javascript. But you can also do it without javascript. You can also use vw and vh in font size, but you have to set it manually depend on the text length. Here is an example. It works great but if the text is too long it will overflow so you will have to change calc(0.9vw + 0.9vh) to smaller value like calc(0.5vw + 0.5vh). Second example.

thank you lot this helped me understand the reason of the overflow happening — مهند عبد الجليل, Dec 31 '18 at 15:21

is there is way to make text fill the button size using css or html only?

1 Answers1