Question

是否可以根据填充定义overflow：hidden开始的位置？

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

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

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

Answer 1

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

＆＃13;

table {
   width: 100px;
    table-layout:fixed;  
}

td {
  border: 1px solid red;
  padding: 10px;
}

.inner {
    border: 1px solid blue;
    overflow: hidden;
}

＆＃13;

<table>
    <tr>
        <td><div class="inner">123456789012345678901234567890</div></td>
    </tr>
</table>

＆＃13;

如果您想在号码中添加...，请将text-overflow: ellipsis;添加到.inner。

Answer 2

添加text-overflow:ellipsis以在末尾添加椭圆。希望这可以解决您的问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

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

＆＃13;

<div>testtesttesttesttesttest</div>

＆＃13;

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

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>

将表内容换行到span ＆LT;跨度＆GT; 很长的一行文字，希望这会有所帮助＆LT; /跨度＆GT;

然后添加CSS TD SPAN，将其浮动到右侧道明SPAN { 浮动：正确 }

溢出：隐藏在填充后面

4 个答案: