ボタンのテキストがボタンの外に浮かぶ

ボタンの半分と半分のテキストがあるボタンがいくつかあります。長すぎるため、ボタンの右側には伸びていません。ボタンの下の水平境界線で半分にカットされています。ボタンのテキストがボタンの外に浮かぶ

これに新しいことは、実際に何をするかわからずにキッチンシンクをボタンcssに投げているだけです。どんな助けもありがたい。

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;

出典

2017-02-18 Neddie

設定した高さと幅のCSSプロパティを削除しようとしましたか？必ずしもそうする必要はありません。テキストがボタンの幅を決めるようにしてください –

返信いただきありがとうございます。私はそれらを削除し、今テキストがボタンの中にありますが、ボタンは今では大きすぎます。私はテキストを小さくしようとしましたが、たとえテキストXXを小さくしてもボタンのすぐ下に座っていました。私は縦にそれを中心にしているようだ。 – Neddie

あなたのパディングトップはそれに責任があります。 Padding-topがボタンのデフォルトの高さに追加されました –

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;

それはCSSの使用のためにテキスト

出典

2017-02-18 20:09:59 Pulkit

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

を削減するよう、幅や高さを指定する必要はありません。この

#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; 
}

あなたはただ一人でpaddingプロパティを使用することができ、それはテキストの4つの方向に追加されます。 font-sizeが小さすぎます。

チェックアウト：here

出典

2017-02-18 21:09:10

ありがとうございます。しかし、高さと幅の制限を含まないと、ボタンが大きくなりすぎます。 – Neddie

https://jsfiddle.net/1wqw358g/1/ –

にあるものよりも大きかった。ありがとう。私は高さと幅を使用せず、パディングをソートしました。ご協力いただきありがとうございます。 – Neddie

ボタンのテキストがボタンの外に浮かぶ

答えて

関連する問題