固定幅でHTMLボタンのテキストを折り返す方法は？

HTMLボタンの幅を固定すると、ボタン内のテキストが折り返されないことに気づきました。私はワードラップでそれを試しましたが、ラップできるスペースがあってもそれは単語のカットです。

他のテーブルセルのように固定幅でHTMLボタンのテキストをラップするにはどうすればよいですか？

<td class="category_column">
  <input type="submit" name="ctl00$ContentPlaceHolder1$DataList1$ctl12$ProCat_NameButton" value="Roos Sturingen / Sensors" id="ctl00_ContentPlaceHolder1_DataList1_ctl12_ProCat_NameButton" class="outset" style="height:118px;width:200px;font-size:18px;color:#7F7F7F;width:200px;white-space:pre;"
  />
</td>

CSSクラスは、境界線を追加してパディングを変更するだけです。word-wrap:break-wordこのボタンに追加すると、次のようにラップされます。

Roos Sturingen / Sen
sors

そして、単語の途中で切り取れるのであれば、途中で切り取ってほしくない。

空白のCSSプロパティを利用できることがわかりました。

white-space: normal;

そして、それは通常のテキストとして単語を壊します。

white-space: normal;
word-wrap: break-word;

鉱山は両方で動作します

次のように、HTMLソースに改行を挿入することで、強制的に（ブラウザーが許可すると思います）。

<INPUT value="Line 1
Line 2">

もちろん、改行を配置する場所を特定することは必ずしも簡単ではありません...

ボタンのラベルが属性ではなく要素のコンテンツであるよう<BUTTON>に、の代わりにHTMLを使用できる場合<INPUT>、ボタンのコンテンツよりも数ピクセル狭い属性でvalueそのコンテンツを内に配置する<SPAN>とwidth、トリックを行うようです（ IE6では:-)。

ボタンは機能するstyle="height: 100%;"が、ボタンに追加して、iPhone iOS 5.1.1のSafariの最初の行より多く表示されるようにする

   white-space: normal;
   word-wrap: break-word;

「両方」は私のために働いた。

このような複数行のボタンは、実装するのは簡単ではありません。このページでは、このテーマについて興味深い（多少古くはありますが）ディスカッションがあります。おそらく、複数行の要件を削除するか、divsやCSS などを使用してカスタムボタンを作成し、JavaScriptを追加してボタンとして機能させることをお勧めします。

この<button>ようなタグ内にいくつかの内部分割がある場合

<button class="top-container">
    <div class="classA">
       <div class="classB">
           puts " some text to get print." 
       </div>
     </div>
     <div class="class1">
       <div class="class2">
           puts " some text to get print." 
       </div>
     </div>
</button>

いつかクラスAのテキストは、両方とも1つのボタンタグ内にあるため、class1データで重複します。私は-を使ってtexを壊そうとします

 word-wrap: break-word;         /* All browsers since IE 5.5+ */
 overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */ 

しかし、これはうまくいきません、それで私はこれを試します-

white-space: normal;

上記のcssプロパティを削除し、私のタスクを完了させた後。

うまくいくことを願っています!!!

word-wrap: break-word;

私のために働いた。