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

Question

基本上我有一个内部带有“删除”字样的按钮。

它目前使用此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。

当我使窗口水平变小时，按钮的背景将缩小并慢慢切掉“删除”文本，直到只有部分“D”可见。

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

Answer 1

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

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