CODEWITHSUNDEEP
htmlcss
مهند عبد الجليل
مهند عبد الجليل

Reputation: 669

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

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

Upvotes: 1

Views: 1885

Answers (1)

mozkomor05
mozkomor05

Reputation: 1427

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.

Upvotes: 2

Related Questions