使 type=submit 的按钮看起来像超链接并换行

Question

我在一个表单上有一个提交按钮，我希望它的样式和行为像一个锚点。我尝试使用CSS来实现这一点，但是在我的jsfiddle示例中可以看到，按钮文本是单独占据一行的。如果可能的话，我想避免使用额外的JavaScript，我可以使用锚点。

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/

目前的效果和应有的效果

- zapjelly

---

请澄清您的问题。 - Mayank Nimje

嗨@MayankNimje-抱歉我的问题不够清晰。我已更新措辞并包含了我想要实现的屏幕截图。谢谢！ - zapjelly

这是一个有趣的问题，但是用几行JS代码解决问题比任何CSS的hack和技巧更有效，即使在这种情况下（在我看来）可能性很小。 :) - sinisake

嗨@nevermind - 你完全正确 :) 但我认为可能有人知道方法。 - zapjelly

可能是Button display inline CSS的重复问题。 - Terence Hill

Answer 1

无法将按钮呈现为行内元素。请参见

https://www.w3.org/TR/html5/rendering.html#the-button-element-0

按钮始终呈现为内联块或块级元素。

- Terence Hill

Answer 2

使用输入提交类型，将其包装在标签中，然后给输入添加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>

- zer00ne

---

嗨@zer00ne - 您的回答根本没有解决我的问题，但还是谢谢。我希望提交按钮文本不会从段落的其余部分中断成新行。我可以使用锚来实现这一点，但button type="submit"更具语义性，因此我正在尝试修复它。 - zapjelly

在那个长度上，你要么是看到它被视口右侧的一半隐藏了，要么是一个高元素。你只描述了你要找的东西，但没有描述结果会是什么样子。尺寸是多少？部分隐藏是否可以接受？你想要文本换行吗？必须要两个元素吗？因为使用一个元素会更简单。 - zer00ne

更新涉及标签和输入提示，下划线表示没有换行符，并且布局是语义化的并符合规格。 - zer00ne

嗨@zer00ne - 感谢您回来并添加另一条评论。我附上的屏幕截图可能会更清楚地说明我想要按钮的样子。 - zapjelly

Answer 3

一种实现方式是在按钮中使用display: contents，使其看起来似乎container不存在，从而使按钮文本与span文本在同一行呈现。

https://jsfiddle.net/5znfhoav/

- Diego Zacarias

---

这在视觉上是有效的，但会破坏键盘用户的按钮行为（您无法再使用Tab键访问它），并且对可访问性非常不利。 - Jesse Houchins