溢出:隐藏在填充后面

Question

是否可以定义overflow:hidden基于填充开始的位置？

例如,我目前有一个表格,其中有一个长字符串.左边有填充,但是字符串的长度超过了td,因此触发了流出隐藏.我想溢出:隐藏在padding的开头而不是td的结尾触发.

基本上我想要溢出:隐藏在最右边的红线开始处.

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

Answer 1

只需将您的内容包装在另一个元素中,然后将其overflow: hidden应用于:

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>

如果要添加...数字,请添加text-overflow: ellipsis;到.inner.