下記のようにHTMLを書くと、長い行のボタンができてしまいます。

<input type="submit" value="ここに改行のない長い一行がある" >
これを、width,heightを指定し、適当に折り返してもらい見やすくするのはどうCSSを書くとよいのでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:2009/02/18 18:23:24
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答2件)

id:pspet No.1

回答回数93ベストアンサー獲得回数1

ポイント25pt

width,heightを指定しなくてもいけます。

<input type="submit" value="ここに改行のない&#13;&#10;長い一行がある" >

このように改行して折り返したいところに&#13;&#10;と入れてください。

使用するときは、#13;#10;の&を半角にしてください。(&にして。)

都合上、ここでは、半角で書けませんでした。

http://fdays.blogspot.com/2008/08/htmlinputvalue-typebutton-valu...

id:isogaya

改行をいれることはできないのです。

2009/02/18 17:38:32
id:eternie No.2

回答回数10ベストアンサー獲得回数1

ポイント50pt

もしかして ボタン内の文字列をワードラップさせることを意図しているのでしょうか?

そうであれば,inputタグでは実現が難しいので,代替手段として button タグを使い,そこに対してスタイルシートを設定する手法を使って

<input type="button" value="This is a test. abcdefghijklmnopqrstuvwxyz" style="width:100px; word-break:keep-all;"> <!--比較用inputタグ-->
<button style="width:100px; word-break:keep-all;">This is a test. abcdefghijklmnopqrstuvwxyz</button> <!--(1)--> <br>
<button style="width:100px; word-break:keep-all;">試験です。本日は晴天なり。</button><!-- (2) -->

としてみるとできますがいかがでしょうか?

http://www.eternie-labs.net/~eternie/hatena/answer00.png

[写真は,上から順に,比較用inputタグ,(1),(2)]

id:isogaya

ありがとうございます。

2009/02/18 18:23:06
  • id:eternie
    上で書き忘れました。

    <input type="submit"> の機能を <button> で再現するには, <button type="submit"> と書けばOKです。
    http://www.tohoho-web.com/html/button.htm

  • id:pahoo
    button タグでワードラップできるのは、ブラウザ依存です。

    代替案として、a タグとCSSとJavaScriptの組合せはいかがでしょう。
    デザインはCSSを変更してもらうとして、ロジック的には http://template.b-cures.net/dl/menubutton5/ のようなイメージになります。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません