Wie kann ich verhindern, dass eine Schaltfläche verkleinert kleiner als Non-Wrapping-Text mit CSS?

Question

Im Wesentlichen habe ich eine Schaltfläche mit dem Wort "Löschen" innerhalb.

Es nutzt derzeit diese 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; 
} 

Es ist auch col-xs-2 und col-xs-Offset-3 verwendet.

Wenn ich das Fenster horizontal verkleinere, wird der Hintergrund für die Schaltfläche verkleinert und der Text "Löschen" wird langsam abgeschnitten, bis nur noch ein Teil des "D" sichtbar ist.

Wie würde ich verhindern, dass die Schaltfläche den Schriftarttext abschneiden kann? Ich möchte, dass die Schaltfläche nicht mehr schrumpft, bevor der Text abgeschnitten wird.

Answer 1

Ja, verwenden Sie min-width = xxx, und Sie sollten auch eine min-height = xxx in Betracht ziehen, damit das Löschen lesbar ist. Stellen Sie es auf die Pixelgröße ein, die für den Text geeignet ist.

Eine weitere Option besteht darin, ein Löschbuttonbild zu erstellen und dessen Minimumswerte anzugeben. Dies ist jedoch die komplexere Lösung.