Question

所以这个有一些活动部件。我会尽力捕捉到最新情况，不要求我将整个网站转储到这里。

所以这里是设置：我一直在使用CSS设计一个可点击的链接按钮，其中包含超链接的所有功能，即具有右键单击选项的功能。我通过块，内联块和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>

Theres显然在该代码中进行了一些简化，但它捕获了问题的根源。目前这段代码完成了我打算做的99％：内联块填充整个td，它嵌套在一起使整个块像一个超链接一样可点击，它的格式表像任何td或div一样，文本在中心（需要一段时间才弄清楚），但如果文本在内联块之外断开并需要换行，则换行文本将出现在父td的边界之下和之外。我已经尝试了很多不同的东西来实现这一点：将空格设置为pre，将:: before class中的内容设置为\ A，我甚至不记得我尝试过的所有内容。我知道我可以将文本换行设置为省略号或其他东西，但这看起来很俗气，而且我非常希望文本能够正确地包装和居中。

有什么想法吗？

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

Answer 1

修改

您可以在表格中使用表格：

删除伪元素::before
删除<span>
将<a> nchor的display从inline-block更改为table
将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

＆＃13;

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

＆＃13;

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

＆＃13;

在内联块之外的词包裹打破

2 个答案:

修改