CSS / HTML - 可以将连字符应用于 <input type="submit" 值吗？

Question

我正在使用一个表单来发送 POST 数据，看起来像一个链接，因为在我的情况下我看不到另一种可能性。

我显然可以将提交按钮设置为看起来像一个链接，但连字符或分词参数将不适用。一些提交按钮的值文本比周围的 div 容器长，所以我需要连字符。

我什至尝试给特定的输入元素一个 id 或 class，但仍然没有使用 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

试试这个

#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 2

首先要做的是在按钮上添加white-space: normal;；否则它根本不会换行。
并摆脱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>

Answer 3

使用<button> 元素而不是<input>。不需要连字规则：你没有特别长的单词，文本可以在空格上换行。

#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>