入力ボタンの中央にあるテキスト

テキストの入った入力ボタンがあります - テキストが入力ボタンに合うようにしたい（意味がありません.2行または3行に広がります）。入力ボタンの中央にあるテキスト

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
</head> 
 
<body> 
 
<style> 
 
.blankbtn 
 
{ 
 
text-align:center; 
 
font-size:20px; 
 
width:150px; 
 
height:150px; 
 
background-image: url(http://thumbnails.billiondigital.com/200/930200/794615_small_checkboard.jpg); 
 
background-repeat:no-repeat; 
 
    
 
} 
 
</style> 
 
<input type="button" value="heres a long text" class="blankbtn"/> 
 

 
</body> 
 
</html>

任意の提案ですか？

出典

2016-08-22 danait25

white-space: pre-line;

出典

2016-08-22 05:23:18

ありがとうへwhite-spaceスクロールここを参照してください、私はクロームでそれを試してみましたが、それは動作しますが、それは正確に何をだそれIE11ブラウザ – danait25

使用空白このCSSを追加：ノーマル;

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
</head> 
 
<body> 
 
<style> 
 
.blankbtn 
 
{ 
 
text-align:center; 
 
font-size:20px; 
 
width:150px; 
 
height:150px; 
 
background-image: url(http://thumbnails.billiondigital.com/200/930200/794615_small_checkboard.jpg); 
 
background-repeat:no-repeat; 
 
    white-space: normal; 
 
    
 
} 
 
</style> 
 
<input type="button" value="heres a long text" class="blankbtn"/> 
 

 
</body> 
 
</html>

出典

2016-08-22 05:37:47 Gowtham

に私のために動作しません。私はしたいがそれは私のために働かない（おそらくそれはブラウザに関連しているのだろうか？IE11）？ – danait25

あなたはIE11を使用していますか？ – Gowtham

私の会社は今IE11でしか動作しないので、Chromeを使用するのは関係ありません。クロムでコードスニペットを試してみましたが、動作しますが、ワークステーションでは動作しません。 – danait25

使用：

word-wrap: break-word;  /* IE 5.5-7 */ 
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */ 
white-space: pre-wrap;  /* current browsers */

それはIEで動作します。ダウンブラウザの互換性

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
</head> 
 
<body> 
 
<style> 
 
.blankbtn 
 
{ 
 
text-align:center; 
 
font-size:20px; 
 
width:150px; 
 
height:150px; 
 
background-image: url(http://thumbnails.billiondigital.com/200/930200/794615_small_checkboard.jpg); 
 
background-repeat:no-repeat; 
 
word-wrap: break-word;  /* IE 5.5-7 */ 
 
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */ 
 
white-space: pre-wrap;  /* current browsers */ 
 
    
 
} 
 
</style> 
 
<input type="button" value="heres a long text" class="blankbtn"/> 
 

 
</body> 
 
</html>

出典

2016-08-22 08:17:31

入力ボタンの中央にあるテキスト

答えて

関連する問題