Wrap-Link-Text innerhalb der Schaltfläche, um weniger als 100% der Breite der Schaltfläche aufzunehmen

Question

Ich versuche herauszufinden, wie Sie Schaltflächen erstellen, wo 70% der Breite von Link-Text und die anderen 30% ist von einem Hintergrundbild aufgenommen. Hier

ist ein Beispiel dafür, was ich meine, und was das Problem ist:

Wie Sie auf dem Foto sehen können, wird der Text weiterhin über das Hintergrundbild. Ich möchte, dass das letzte Wort unter den anderen beiden erscheint, damit es besser aussieht. Gibt es eine Möglichkeit, dies zu tun?

<a href="chickentikka.html" class="btn btn-success recipes" id="chickentikka_button" style="background-image: url('images/ChickenTikka.jpeg');"> 
<span class="linktext"> 
Chicken Tikka Masala 
</span> 
</a> 

EDIT2: CSS

contentsdiv{ 
    margin: 0 auto; 
    text-align: center; 
    width: 70%; 
    padding: 0; 
} 
ul{ 
    margin: 0; 
    padding: 0; 
} 
.btn-success{ 
    width: 100%; 
} 
#contentsdiv li{ 
    display: inline-block; 
    width: 21%; 
} 

.recipes{ 
    text-decoration:none; 
    margin-bottom: 20px; 
    display:inline-block; 
    cursor:pointer; 
    color:#ffffff; 
    font-family:Arial; 
    font-size:0.6vw; 
    font-weight:bold; 
    background-position: right; 
    background-size: 30% 100%; 
    background-repeat: no-repeat; 
    height: 40px; 
    text-align: left; 
    padding-left: 2px; 

} 
.linktext{ 
    max-width: 70%; 
    color: red; 
    display: inline-block; 
} 

Soweit ich sehen kann, diese sind alle Regeln, die eine Auswirkung auf die Tasten haben.

Answer 1

Der Tag a ist das enthaltende Element Ihres Texts, daher wird der Text natürlich die gesamte Breite des Containers umfassen. Sie müssen den Text in einen eigenen Container setzen und die Breite dieses Containers steuern.

HTML:

<a href="#"> 
    <p>Chicken</p> 
</a> 

CSS:

p { 
    max-width:70%; 
} 

Answer 2

Versuchen Sie folgendes:

http://codepen.io/loruit/pen/QNaVre

a{ 
 
    text-decoration: none; 
 
    color: white 
 
} 
 
.main{ 
 
    background: green; 
 
    width: 100px; 
 
} 
 
.text{ 
 
    max-width: 70%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.image{ 
 
    background: url(http://reemx.xtgem.com/jpg/jp0.png) no-repeat; 
 
    background-size: contain; 
 
    display: inline-block; 
 
    width: 25px; 
 
    height: 25px; 
 
    vertical-align: middle; 
 
}

<a href="#"> 
 
    <div class="main"> 
 
    <div class="text">Hello World</div> 
 
     <div class="image"></div> 
 
    </div> 
 
</a>