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

Maybe this will help you [stackoverflow](http://stackoverflow.com/questions/509711/why-does-overflowhidden-not-work-in-a-td) — Mario Kurzweil, Oct 15 '15 at 14:16

Dominic · Accepted Answer · 2020-04-21T12:02:26.443

23

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>

edited Apr 21 '20 at 12:02

answered Oct 15 '15 at 14:25

Dominic

62,658
20
139
163

It is not possible if it is an input, textarea or any other element that cannot have a child. – MrEduar Jul 20 '22 at 19:20
@MrEduar ellipses in inputs is a whole different problem (other SO questions already address it) not related to tables. Due to the styling on td (cells) ellipses doesn't work and it's better to wrap content than mess with those styles was my point – Dominic Feb 24 '23 at 12:36

RRA Webteam · Answer 2 · 2015-10-15T14:36:58.003

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>

It only works with single-line or non-scrollable elements. – MrEduar Jul 20 '22 at 19:23 — MrEduar, Jul 20 '22 at 19:23

score 1 · Answer 3 · answered Oct 15 '15 at 14:22

1

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/

answered Oct 15 '15 at 14:22

Sebastian Brosch

42,106
15
72
87

1

It only works with single-line or non-scrollable elements. – MrEduar Jul 20 '22 at 19:23

Lucky Chingi · Answer 4 · 2015-10-15T14:41:48.313

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 }

overflow: hidden behind padding

4 Answers4

Linked