Truncate table cell with really long string

HTML

<table>
    <tr>
        <td>
            <div class="outer">
                <div class="inner">
                      this_is_a_really_long_string_of_text
                </div>
            </div>
        </td>
        <td>
            222222222
        </td>
    </tr>
</table>

CSS

table {
    width: 100%;
    border: 1px solid #ccc;
}

td {
    padding: 14px;
    line-height: 1.5;
    border: 1px solid #ccc;
}

.outer {
  position:relative;
  height: 22px;
}

.inner {
  position: absolute;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  margin: auto;
  top: 0;
  bottom:0;
}