overflow: hidden behind padding

Question

Is it possible to define where overflow: hidden begins based on padding?

For example, I currently have a table in which I have a long string. There is padding on the left, but the length of the string exceeds the td, so overtflow hidden is triggered. I would like the overflow: hidden to trigger at the beginning of the padding rather than the end of the td.

Essentially I would like the overflow: hidden to begin at the start of the far right red line.

.order-table td {
  padding: 1em 3px;
  border-left: #ddd 1px solid;
  font-size: 0.9em;
  overflow: hidden;
}

Answer 1

Simply wrap your content in another element and apply the overflow: hidden to that instead:

table {
   width: 100px;
    table-layout:fixed;  
}

td {
  border: 1px solid red;
  padding: 10px;
}

.inner {
    border: 1px solid blue;
    overflow: hidden;
    text-overflow: ellipsis;
}

<table>
    <tr>
        <td><div class="inner">123456789012345678901234567890</div></td>
    </tr>
</table>