Broken Button mit kleiner Breite

Question

Ich habe eine Schaltfläche, wo, wenn die Containerbreite zu klein ist, bricht meine Schaltfläche statt die Zeile des Textes zu brechen. Hast du eine Idee, wie ich das beheben kann?

Unten ist ein Beispiel dafür, zusammen mit einem JSFiddle Link here.

.column {width: 200px; margin-top:100px;} 
 
.btn {font-family: 'futura-pt'; \t font-size: 16px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; font-style: normal; color: #444; border: 2px solid #444; 
 
    -webkit-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -moz-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -ms-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -o-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    padding-top: 1em; 
 
    padding-right: calc(1.44em - 1px); 
 
    padding-bottom: 1em; 
 
    padding-left: 1.44em}

<div class="column"> 
 
    <div class="btn_container"> 
 
    <a class="btn" href="#">This is a text button</a> 
 
    </div> 
 
</div>

Answer 1

Sie müssen die Grenze auf dem gleichen Element setzen, dass Sie die Breite hinzuzufügen. verschieben Sie es einfach zu .column:

.column { 
 
    width: 200px; 
 
    margin-top: 100px; 
 
    border: 2px solid #444; 
 
} 
 

 
.btn { 
 
    font-family: 'futura-pt'; 
 
    font-size: 16px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    font-weight: 500; 
 
    font-style: normal; 
 
    color: #444; 
 
    -webkit-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -moz-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -ms-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -o-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    padding-top: 1em; 
 
    padding-right: calc(1.44em - 1px); 
 
    padding-bottom: 1em; 
 
    padding-left: 1.44em 
 
}

<div class="column"> 
 
    <div class="btn_container"> 
 
    <a class="btn" href="#">This is a text button</a> 
 
    </div> 
 
</div>

Beachten Sie, dass Sie auch die Polsterung entfernen auf dem <a> und fügen text-align: center, um den Text ein bisschen ‚schöner‘ angezeigt werden möchten. Ich habe eine aktualisierte Geige erstellt, die die Veränderung, die ich meine, zeigt here.

Hoffe, das hilft! :)

Answer 2

.column { 
 
    width: 200px; 
 
    margin-top: 100px; 
 
} 
 

 
.btn { 
 
    border: 2px solid #444; 
 
    display: block; 
 
    font-family: 'futura-pt'; 
 
    font-size: 16px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    font-weight: 500; 
 
    font-style: normal; 
 
    color: #444; 
 
    -webkit-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -moz-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -ms-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    -o-transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    transition: color 170ms ease-in-out, border-color 170ms ease-in-out; 
 
    padding-top: 1em; 
 
    padding-right: calc(1.44em - 1px); 
 
    padding-bottom: 1em; 
 
    padding-left: 1.44em; 
 
}

<div class="column"> 
 
    <div class="btn_container"> 
 
    <a class="btn" href="#">This is a text button</a> 
 
    </div> 
 
</div>