How can I prevent a button shrinking smaller than non-wrapping text using css?

Question

Essentially I have a button with the word "Delete" inside.

It currently uses this css:

.btn-delete {
    font-size: 32px;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 15px;
    border-top: 0px;
    color: #fff;
    background: linear-gradient(to bottom, #ff0000, #d40000);
    vertical-align: middle;
    text-align: center;
}

It also uses col-xs-2 and col-xs-offset-3.

When I make the window smaller horizontally the background for the button will shrink and slowly cut away the "Delete" text until only part of the "D" is visible.

How would I prevent the button being able to cut off the font text? I would like the button to stop shrinking down before the text starts to get cut off.

Have you tried adding a min-width parameter? if your CSS imports are in the right order this should override the col-xs-2 setting — Sam Kool
– Sam Kool, Commented Dec 27, 2017 at 11:42

Lena Weber · Accepted Answer · 2017-12-27 12:20:12Z

4

Yes, use min-width=xxx, and you should consider a min-height=xxx as well so the delete is readable. Set it to whatever pixel size works for the text.

Another option is to create a delete button image and specify its minimums as well. However, this is the more complex solution.

answered Dec 27, 2017 at 12:20

Lena Weber

2722 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ubershmekel Over a year ago

While using min-width solved my problem, I have no idea why width wasn't enough by itself.

Collectives™ on Stack Overflow

How can I prevent a button shrinking smaller than non-wrapping text using css?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related