Word wrap breaking outside of inline-blocks

Question

So there are a few moving parts with this one. I'll do my best to capture whats going on in a way that doesn't require me to dump the whole website here.

So here's the set-up: I've been using CSS to design a clickable link button with all the features of a hyperlink, namely the ability to have right click options. I've achieved this through a combination of a blocks, inline-blocks, and td's. Here is a code snippet that kind of captures what I'm doing:

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 obviously some simplification in that code, but it captures the root of the problem. Currently this code is doing 99% of what I intended it to do: the inline-block fills the whole td its nested in making the entire block clickable like a hyperlink, its formattable like any td or div, and the text floats properly in the center (that took a while to figure out), but if the text breaks outside of the inline-block and requires wrapping, the wrapped text will appear below and outside of the bounds of the parent td. I've tried a bunch of different things to get this to work: setting whitespace to pre, setting the content in the ::before class to \A, I can't even remember everything I've tried. I'm aware I can just set text wrapping to ellipses or something else, but that'd look pretty tacky and I'd really like for the text to wrap and center properly.

Any ideas?

JSFiddle example: https://jsfiddle.net/kr8e9pr2/

Answer 1

EDIT

You can use a table within a table:

1. Remove the pseudo-element ::before
2. Remove the <span>
3. Change the <a>nchor's display from inline-block to table
4. Add display:table-cell and vertical-align:middle to <strong>

It's compatible with all modern browsers and very simple.

Snippet

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

Set the anchor tag to 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>