溢出:隐藏在填充后面 [英] overflow: hidden behind padding

问题描述

是否可以定义溢出的位置:隐藏是根据填充开始的?

Is it possible to define where overflow: hidden begins based on padding?

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

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

推荐答案

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

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>

这篇关于溢出:隐藏在填充后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！