如何使用css防止按钮缩小小于非包装文本？

Question

基本上我有一个单词＆＃34;删除＆＃34;内部。

目前使用此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;
}

它还使用col-xs-2和col-xs-offset-3。

当我将窗口水平放大时，按钮的背景会缩小并慢慢切掉＆＃34;删除＆＃34;文本直到只有部分＆＃34; D＆＃34;是可见的。

如何阻止按钮切断字体文字？我希望按钮在文本开始被切断之前停止收缩。

Answer 1

是的，使用min-width = xxx，你应该考虑min-height = xxx，这样删除是可读的。将其设置为适用于文本的任何像素大小。

另一种选择是创建删除按钮图像并指定其最小值。但是，这是更复杂的解决方案。