2017-02-24 16 views
0

POSTのデータを送信するフォームを使用していますが、私の場合は別の可能性がないので、リンクのように見えます。CSS/HTML - <input type = "submit"の値にハイフネーションを適用できますか?

明らかに、送信ボタンをリンクのように表示することはできますが、ハイフンまたは単語区切りのパラメータは適用されません。いくつかの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>

+1

"として、任意のハイフンまたはワードブレークパラメータは適用されません、と述べました。" - あなたが提供したコードには何もありません。 HTMLもありません。 – Quentin

+0

"いくつかのサブミットボタンの値のテキストが周囲のdivコンテナよりも長い" - あなたのサンプルコードにdiv ...がなく、*非常に短い*ラベルがあります。 [mcve]を[ライブデモ](https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/)として提示した場合は、 – Quentin

+0

がもう一度編集されます実行中のコードスニペット –

答えて

2

代わり<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>

+0

は 'white-space:normal'を設定しても実際にはうまくいきます。私の答えを見てください。 –

+0

ありがとう@クエンティン!完璧に動作します。コードニッペットの使用に関する教訓をお寄せいただきありがとうございます。 –

-1

まず最初に行うには、ボタンに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>

+0

Plsがあなたの質問を精緻化します。もしあなたの問題がハイフンなら、既に解決済みだと思います。 –

0

を試してみてください。それ以外の場合は、まったくラップしません。
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>

関連する問題