web-dev-qa-db-ja.com

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

HTMLボタンに固定幅を指定すると、ボタン内のテキストが折り返されないことに気付きました。 Word-wrapで試してみましたが、ラップできるスペースがありますが、これはWordの一部です。

テーブルセルのように固定幅で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

また、単語間で切り取ることができる場合は、単語の途中で切り取りたくないです。

htmlcssbuttonword-wrap
178
Peter

ホワイトスペースCSSプロパティを利用できることがわかりました：

white-space: normal;

そして、通常のテキストとして単語を分割します。

485
Siu
white-space: normal;
Word-wrap: break-Word;

鉱山は両方で動作します

9
Richard

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

<INPUT value="Line 1
Line 2">

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

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

8
Brian Nixon

ボタンが機能することがわかりましたが、iPhone iOS 5.1.1のSafariで最初の行よりも多く表示されるように、style="height: 100%;"をボタンに追加する必要があります。

6
Nick Saemenes

このような<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データでオーバーラップします。これらは両方とも1つのボタンタグに含まれているためです。を使用して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プロパティを削除し、タスクを完了しました。

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

2
S.Yadav
Word-wrap: break-Word;

私のために働いた。

1
Juubes
   white-space: normal;
   Word-wrap: break-Word;

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

1
Bhavani Raju

このような複数行ボタンは、実装するのが本当に簡単ではありません。 このページ には、このテーマに関する興味深い（やや古くなっていますが）議論があります。あなたの最善の策は、おそらく複数行の要件を削除するか、またはを使用してカスタムボタンを作成することです。 divsとCSS、およびJavaScriptを追加してボタンとして機能させる。

1
Daan