1. ホーム
  2. html

[解決済み] HTMLボタンのテキストを固定幅で折り返すには?

2022-02-11 10:06:50

質問

HTMLボタンに固定幅を与えた場合、ボタン内のテキストが折り返されないことに今気づきました。word-wrapで試してみましたが、折り返すためのスペースがあるにもかかわらず、単語が切り取られてしまいます。

幅が固定された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プロパティを活用すればいいことがわかりました。

white-space: normal;

そして、通常のテキストとして改行されます。