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

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

If you want to add a ... to the number then add text-overflow: ellipsis; to .inner.

Answer 2

Add text-overflow:ellipsis to add an ellipse at the end. Hopefully this fix's your issue.

/*** USELESS STYLES ***/
html,
body {
  background: #FFF;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.4em;
}
.element:before {
  content: '> ';
}
/*** .USELESS STYLES ***/

.element {
  background: #F1F1F1;
  color: #555;
  padding: 10px 15px;
  overflow: hidden;
  border: 1px solid #ccc;
  margin: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 50%;
}

<div class="element" title="This is some text that will need to cut because it will be far to long for users to see but the user should know what it means, and they can even click to find out more about this if your site supports this.">Hover Over Me. This is some text that will need to cut because it will be far to long for users to see but the user should know what it means, and they can even click to find out more about this if your site supports this.</div>

Answer 3

The solution like the following example should work:

div {
    border:1px solid #000;    
    padding:20px;
    width:50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;          
}

<div>testtesttesttesttesttest</div>

See on fiddle: https://jsfiddle.net/bm3upfoc/

Answer 4

table {
  width: 300px;
  table-layout: fixed;
}
td {
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
}
td span {
  float: right;
}
.inner {
  border: 1px solid blue;
  overflow: hidden;
}

<table>
  <tr>
    <td>
      <span>
something
</span>
    </td>
    <td>
      <span>
1234567890ABCDEFG
</span>
    </td>
    <td>
      <span>
something
</span>
    </td>
  </tr>
</table>

Wrap the table content to span
<span> a Very Long line of text and hope this helps </span>

then add the CSS TD SPAN, float it to right
TD SPAN{ float:right }