溢出：隐藏在填充后面

Question

是否可以根据填充定义溢出：隐藏从何处开始？

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

基本上我希望 overflow: hidden 从最右边的红线开始。

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

Answer 1

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

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

Answer 2

类似以下示例的解决方案应该有效：

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

<div>testtesttesttesttesttest</div>

参见 fiddle：https://jsfiddle.net/bm3upfoc/

Answer 3

只需将您的内容包裹在另一个元素中，然后将 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>

Answer 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>

将 table 内容换行到 span
<跨度> 一行很长的文字，希望这有帮助

然后添加CSS TD SPAN，将其向右浮动
TD跨度{ float:right }

溢出：隐藏在填充后面

overflow: hidden behind padding

css

user-interface

padding