CODEWITHSUNDEEP
htmlcss
JDawwgy
JDawwgy

Reputation: 928

Why is my button breaking when the text is too long

I have a css button and I need its width to be 250px, the problem is that when the text in the button is too big the button seems to break in half instead of wrapping.

I have white-space: normal applied to the button but the break is still happening.

.button {
  color: white;
  background-color: red;
  border: 2px white;
  white-space: normal;
  padding: 10px 15px;
  text-align: center;
}
.container {
  max-width: 250px;
}
<div class="container">
  <a class="button">my button whose text is longer than 250px</a>
</div>

Upvotes: 1

Views: 164

Answers (1)

Derrek
Derrek

Reputation: 44

Sometimes on top of using white-space: normal; ups will also need the element to be display: inline-block;

.button {
  color: white;
  background-color: red;
  border: 2px white;
  white-space: normal;
  padding: 10px 15px;
  text-align: center;
  display: inline-block;
}
.container {
  max-width: 250px;
}
<div class="container">
  <a class="button">my button whose text is longer than 250px</a>
</div>

Upvotes: 1

Related Questions