行内块外的换行

Question

所以这个有几个活动的部分。我会尽我最大的努力，以一种不需要我在这里转储整个网站的方式来捕捉正在发生的事情。

所以设置是这样的:我一直在使用CSS设计一个可点击的链接按钮，它具有超链接的所有功能，即具有右键单击选项的能力。我通过a块、内联块和td的组合实现了这一点。下面是一段代码片段，它捕获了我正在做的事情：

​

a.classa:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  font-size: 0px;
}

a.classa {
  display: inline-block;
  height: 100%;
  width: 100%;
}

<table>
  <tr>
    <td>
      <a class="classa" href="whatever">
    long text that will break outside of the bottom of the inline-block when wrapped
    </a>
    </td>
  </tr>
</table>

​

显然，代码中有一些简化，但它抓住了问题的根源。目前这段代码完成了我想要做的99%：inline-block填充整个td，使整个td像一个超级链接一样可点击，它的格式像任何td或div一样，文本在中心正确浮动(这花了一段时间才弄清楚)，但是如果文本在inline-block之外中断并需要换行，换行的文本将出现在父td的边界之下和边界之外。我尝试了一系列不同的方法:将空格设置为pre，将类中的内容设置为\A，我甚至记不起我尝试过的所有内容。我知道我可以只将文本换行设置为省略号或其他什么，但这看起来会很俗气，我真的希望文本正确地换行和居中。

有什么想法吗？

JSFiddle示例：https://jsfiddle.net/kr8e9pr2/

Answer 1

编辑

您可以在表中使用表：

从::before

• Remove <span>

• Change

• <a>nchor's display中删除伪元素，从inline-block到table

• Add display:table-cell，从vertical-align:middle到<strong>

它与所有现代浏览器兼容，而且非常简单。

代码片段

​

a.classa {
  display: table;
  height: 100%;
  width: 100%;
}

strong {
  font-size: 16px;
  color: #000000;
  display: table-cell;
  vertical-align: middle;
}

<table border="0" cellspacing="0" cellpadding="0" width="50" height="80" style="background-color: #fac291;">
  <tbody>
    <tr>
      <td width="100%" height="80px" style="margin-top: 40px; text-align: center; border-style: solid; border-color: #d15400; border-width: 0px 2px; background-size: 65px 65px;">
        <a class="classa" href="https://www.google.com">
          <strong style="">Student Immunization Form</strong>
        </a>
      </td>
    </tr>
  </tbody>
</table>

​

Answer 2

将anchor标记设置为display:flex

fiddle

​

a.classa:before {
  content: "\A";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  font-size: 0px;
}

a.classa {
  display: flex;
}

<table border="0" cellspacing="0" cellpadding="0" width="50" height="80" style="background-color: #fac291;">
  <tbody>
    <tr>
      <td width="100%" height="80px" style="margin-top: 40px; text-align: center; border-style: solid; border-color: #d15400; border-width: 0px 2px; background-size: 65px 65px;">
        <a class="classa" href="https://www.google.com">
          <span style="font-size: 12pt; color: #000000;"><strong>Student Immunization Form</strong></span>
        </a>
      </td>
    </tr>
  </tbody>
</table>

​