溢出：隐藏在填充后面答案

【问题标题】：overflow: hidden behind padding溢出：隐藏在填充后面
【发布时间】：2020-04-21 20:02:26
【问题描述】：

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

例如，我目前有一个表，其中有一个长字符串。左边有padding，但是字符串的长度超过了td，所以触发了overtflow hidden。我希望溢出：隐藏在填充的开头而不是 td 的结尾触发。

基本上我希望溢出：隐藏从最右边的红线开始。

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

【问题讨论】：

也许这会对你有所帮助stackoverflow

标签： css user-interface padding

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

添加text-overflow:ellipsis 在末尾添加一个椭圆。希望这个修复是您的问题。

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

&lt;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."&gt;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.&lt;/div&gt;

【讨论】：

【解决方案3】：

类似以下示例的解决方案应该可以工作：

div {
    border:1px solid #000;    
    padding:20px;
    width:50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;          
}

&lt;div&gt;testtesttesttesttesttest&lt;/div&gt;

参见小提琴：https://jsfiddle.net/bm3upfoc/

【讨论】：

【解决方案4】：

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>

将表格内容包装到 span
很长的一行文字，希望对您有所帮助

然后添加 CSS TD SPAN，使其向右浮动
TD跨度{ 浮动：右 }

【讨论】：