使按钮 type=submit 看起来像锚一样换行

Question

我在表单上有一个提交按钮，我希望它的样式和行为像锚点一样。我尝试在 css 中执行此操作，但您可以在我的 jsfiddle 示例中看到，按钮文本位于其自己的行中。我可以使用锚点，但希望避免额外的 js，如果可能的话。

HTML：

<span>blah </span> <button type="submit">blaajsdkla blaajsdklajsdkla bla ajsdklajsdkla blaajsdkla sdlaskjdas djakldaldasdjaskj aj as blaajsdkla blaajsdkla sdlaskjdas djakldaldasdjaskj aj as</button> <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span>

CSS：

button{
    border: none;
    white-space: normal;
    display:inline-block;
    font: inherit;
    margin: 0;
    padding: 0;
    outline: none;
    outline-offset: 0;
    color: blue;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    background:transparent;
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height:normal;
}

jsfiddle 代码 https://jsfiddle.net/zapjelly/30ta6ofm/4/

目前的样子和应该是什么样子

Answer 1

使用输入提交类型，将其包装在标签中，然后给出输入display:none。尽管提交是隐藏的，但标签将充当提交按钮，因为它的for属性将自身绑定到提交。标签是一个内联元素。FIDDLE

片段

* {
  margin: 0;
  padding: 0;
}
#dual {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  max-width: 97vw;
  border: none;
  max-height: 50px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%)repeat;
}
#dual * {
  border: none;
  display: table-row;
  font: inherit;
  outline: none;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  line-height: 1;
  font-variant: small-caps;
  letter-spacing: .3px;
  word-spacing: 2px;
  white-space: pre-line;
}
#sub1 {
  display: none;
}
label {
  text-align: justify;
  text-decoration: underline;
  color: #923;
  box-shadow: -8px 8px 10px 3px rgba(0, 0, 0, 0.7);
}

<form id='dual' name='dual'>
  <label for='sub1'>
    <input id='sub1' type='submit' value=''>Blaajsdkla blaajsdklajsdkla blaajsdklajsdkla blaajsdkla sdlaskjdas Djakldaldasdjaskj Aj as blaajsdkla bBaajsdkla Ssdlaskjdas djakldaldasdjaskj aJ as Blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah</label>
</form>