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 lef

Answer 1

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

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.