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

Question

我正在使用表单发送 POST 数据，看起来像 link，因为在我的案例中我看不到另一种可能性。

我显然可以将提交按钮的样式设置为看起来像 link，但连字符或断字参数将不适用。一些提交按钮的值文本比周围的 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>

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

CSS / HTML - Can hyphenation be applied to <input type="submit" value?

html

css

hyphenation