CSS/HTML - <input type = "submit"の値にハイフネーションを適用できますか？

Question

POSTのデータを送信するフォームを使用していますが、私の場合は別の可能性がないので、リンクのように見えます。

明らかに、送信ボタンをリンクのように表示することはできますが、ハイフンまたは単語区切りのパラメータは適用されません。いくつかのsubmitbuttonの値のテキストは周囲のdivコンテナよりも長いので、ハイフネーションが必要です。

私は特定の入力要素にidやクラスを与えようとしましたが、cssではまだ効果がありません。

アイデア？

#box_link 
 
{ 
 
width: 100px; 
 
height: 100px; 
 
background-color: lime; 
 
} 
 

 
#box_link input[type=submit] 
 
{ 
 
    background-color: white; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 

 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
} 
 

 
#hyphbutton 
 
{ 
 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
} 
 

 
#box_link input[type=submit]:hover 
 
{ 
 
    color: red; 
 
}

<div id="box_link"> 
 

 
<form action="alarmierungssoftware/anwendungsbeispiele" method="POST"> 
 
<input type="hidden" name="param" value="stiller_alarm" /> 
 
<input type="submit" id="hyphbutton" value="Stiller Alarm/Hilferuf" /> 
 
</form> 
 

 
</div>

Answer 1

代わり<input>の<button>要素を使用。ハイフネーションのルールは必要ありません。あなたは特に長い単語はなく、テキストはスペースに折り返すことができます。

#box_link 
 
{ 
 
width: 100px; 
 
height: 100px; 
 
background-color: lime; 
 
} 
 

 
#box_link [type=submit] 
 
{ 
 
    background-color: white; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 

 
#box_link [type=submit]:hover 
 
{ 
 
    color: red; 
 
}

<div id="box_link"> 
 

 
<form action="alarmierungssoftware/anwendungsbeispiele" method="POST"> 
 
<input type="hidden" name="param" value="stiller_alarm" /> 
 
<button type="submit" id="hyphbutton" value="Stiller Alarm/Hilferuf">Stiller Alarm/Hilferuf</button> 
 
</form> 
 

 
</div>

Answer 2

まず最初に行うには、ボタンにwhite-space: normal;を追加することです。この

#box_link 
 
{ 
 
width: 100px; 
 
height: 100px; 
 
background-color: lime; 
 
} 
 

 
#box_link input[type=submit] 
 
{ 
 
    background-color: transparent; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 

 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
    word-wrap:break-word; 
 

 
} 
 

 
#hyphbutton 
 
{ 
 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
    word-wrap:break-word; 
 
} 
 

 
#box_link input[type=submit]:hover 
 
{ 
 
    color: red; 
 
}

<div id="box_link"> 
 

 
<form action="alarmierungssoftware/anwendungsbeispiele" method="POST"> 
 
<input type="hidden" name="param" value="stiller_alarm" /> 
 
<input type="submit" id="hyphbutton" value="Stiller Alarm/Hilferuf" /> 
 
</form> 
 

 
</div>

Answer 3

を試してみてください。それ以外の場合は、まったくラップしません。
word-break: break-all;を取り除くと、あまり巻き過ぎます。

自動ラッピングルーチンを動作させるには、どの言語を使用しているかをブラウザが知っていることが非常に重要です。そのため、使用するハイフネーションルールを決定できます。
自動ハイフネーションはMozillaとIEのみで動作するようですが、Chromeでは動作しません。

ああ、私のソースの画像は決して気にしないでください。

#box_link input[type=submit] 
 
{ 
 
    background-color: white; 
 
    margin: 0; 
 
    padding: 0; 
 
    white-space: normal; 
 
} 
 

 
#box_link input[type=submit]:hover 
 
{ 
 
    color: red; 
 
} 
 

 
#box_link input[type=submit] 
 
{ 
 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
}

<div id="box_link" lang="de-DE"> 
 
    <table> 
 
    <tr> 
 
    <td><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.isa.org%2FuploadedImages%2FContent%2FStandards_and_Publications%2FISA_Publications%2FInTech_Magazine%2F2012%2FApril%2F2012-4-36-alarm.jpg&f=1" alt="Stiller Alarm/Hilferuf" /></td> 
 
    <td> 
 
     <form action="alarmierungssoftware/anwendungsbeispiele" method="POST"> 
 
      <input type="hidden" name="param" value="stiller_alarm" /> 
 
      <input type="submit" id="hyphbutton" value="Stiller Alarm/Hilferuf" /> 
 
     </form> 
 
    </td> 
 
    </tr> 
 
    </table> 
 
</div>