CODEWITHSUNDEEP
css
Neddie
Neddie

Reputation: 11

Button text floats outside of button

I have a few buttons where the text is half in and half out of the button. It's not extending over the right side of the button because it is too long. It is just cut in half by the bottom horizontal border of the button.

Being new to this I am just throwing the kitchen sink at the button css without really knowing what it will do. Any help appreciated.

color:yellow;
background-color:aquamarine;
height: 20px;
width: 100px;
border:none 0px transparent;
font-size: 1px;
float:right;
overflow:visible;
vertical-align:text-top;
text-align:center;
padding-top:65px;
text-overflow: ellipsis;

Upvotes: 1

Views: 2765

Answers (2)

Femi Oladeji
Femi Oladeji

Reputation: 365

<body>
  <button id="btn">
    THIS IS A TEXT
  </button>
</body>

For the css use this

#btn {
  color:black;
  background-color:aquamarine;
  /*height: 20px;
  width: 100px;*/
  border:none 0px transparent;
  /*font-size: 1px;*/
  float:right;
  overflow:visible;
  vertical-align:text-top;
  text-align:center;
  padding: 10px;
  /*padding-top:65px;*/
  text-overflow: ellipsis;
}

You can just use padding property alone, that adds to the four directions of the text. The font-size was too small.

Check it out here.

Upvotes: 0

Pulkit
Pulkit

Reputation: 1040

color:yellow;
background-color:aquamarine;
border:none 0px transparent;
font-size: 1px;
float:right;
overflow:visible;
vertical-align:text-top;
text-align:center;
padding-top:65px;
text-overflow: ellipsis;

No need for specifying width or height as it will cut the text

Upvotes: 1

Related Questions