如何使用 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，这样删除是可读的。将其设置为适用于文本的任何像素大小。

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