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

Mario Kurzweil
– Mario Kurzweil

2015-10-15 14:16:35 +00:00
Commented Oct 15, 2015 at 14:16 — Mario Kurzweil
– Mario Kurzweil, Commented Oct 15, 2015 at 14:16

nanobar · Accepted Answer · 2020-04-21 12:02:26Z

30

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, 2020 at 12:02

answered Oct 15, 2015 at 14:25

nanobar

66.8k26 gold badges156 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MrEduar Over a year ago

It is not possible if it is an input, textarea or any other element that cannot have a child.

nanobar Over a year ago

@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

RRA Webteam · Accepted Answer · 2015-10-15 14:36:58Z

4

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>

edited Oct 15, 2015 at 14:36

answered Oct 15, 2015 at 14:19

RRA Webteam

1679 bronze badges

1 Comment

MrEduar Over a year ago

It only works with single-line or non-scrollable elements.

Sebastian Brosch · Accepted Answer · 2015-10-15 14:22:10Z

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, 2015 at 14:22

Sebastian Brosch

43.8k15 gold badges78 silver badges89 bronze badges

1 Comment

MrEduar Over a year ago

It only works with single-line or non-scrollable elements.

Lucky Chingi · Accepted Answer · 2015-10-15 14:41:48Z

1

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 }

edited Oct 15, 2015 at 14:41

answered Oct 15, 2015 at 14:35

Lucky Chingi

2,2561 gold badge13 silver badges15 bronze badges

Collectives™ on Stack Overflow

overflow: hidden behind padding

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related