Schaltfläche Text schwebt außerhalb der Schaltfläche

Ich habe ein paar Schaltflächen, wo der Text halb und halb aus der Schaltfläche ist. Es erstreckt sich nicht über die rechte Seite der Schaltfläche, weil es zu lang ist. Es wird nur halbiert durch den unteren horizontalen Rand der Schaltfläche.Schaltfläche Text schwebt außerhalb der Schaltfläche

Neu zu diesem bin ich nur werfen die Spüle auf den Knopf CSS ohne wirklich zu wissen, was es tun wird. Jede Hilfe wird geschätzt.

color:yellow; 
background-color:aquamarine; 
height: 20px; 
width: 100px; 
border:none 0px transparent; 
font-size: 1px; 
float:right; 
overflow:visible; 
vertical-align:text-top; 
text-align:center; 
padding-top:65px; 
text-overflow: ellipsis;

Quelle

2017-02-18 Neddie

Haben Sie versucht, die Höhe und Breite CSS-Eigenschaft zu entfernen, die Sie festlegen? Das musst du nicht unbedingt tun. Lassen Sie den Text die Breite der Schaltfläche bestimmen –

Danke für die Antwort. Ich habe sie entfernt und jetzt ist der Text in der Schaltfläche, aber der Button ist jetzt zu groß. Ich habe versucht, den Text kleiner zu machen, aber selbst wenn ich den Text XX kleine Tit sitzt direkt am unteren Rand der Taste. Ich kann es nicht vertikal zentrieren. – Neddie

Ihr Padding-Top ist wahrscheinlich dafür verantwortlich. Padding-top fügt der Standardhöhe der Schaltfläche hinzu –

color:yellow; 
background-color:aquamarine; 
border:none 0px transparent; 
font-size: 1px; 
float:right; 
overflow:visible; 
vertical-align:text-top; 
text-align:center; 
padding-top:65px; 
text-overflow: ellipsis;

Keine Notwendigkeit für Breite oder Höhe spezifizieren, wie sie den Text abgeschnitten wird

Quelle

2017-02-18 20:09:59 Pulkit

<body> 
    <button id="btn"> 
    THIS IS A TEXT 
    </button> 
</body>

Für die CSS diese

#btn { 
    color:black; 
    background-color:aquamarine; 
    /*height: 20px; 
    width: 100px;*/ 
    border:none 0px transparent; 
    /*font-size: 1px;*/ 
    float:right; 
    overflow:visible; 
    vertical-align:text-top; 
    text-align:center; 
    padding: 10px; 
    /*padding-top:65px;*/ 
    text-overflow: ellipsis; 
}

Sie können padding Eigenschaft nur allein verwendet werden, das fügt zu den vier Richtungen des Textes hinzu. Die font-size war zu klein.

Überprüfen Sie es here.

Quelle

2017-02-18 21:09:10

Danke. Aber wenn ich die Höhen- und Breitengrenzen nicht berücksichtige, wird der Button zu groß. – Neddie

Größer als der in https://jsfiddle.net/1wqw358g/1/ –

Danke. Ich sortierte es, indem ich nicht die Höhe und Breite, sondern die Polsterung verwendete. Danke für Ihre Hilfe. – Neddie

Schaltfläche Text schwebt außerhalb der Schaltfläche

Antwort

Verwandte Themen