为什么在表格单元格没有CSS省略号工作?

问题描述 投票:133回答:10

考虑下面的例子:(live demo here

$(function() {
  console.log("width = " + $("td").width());
});
td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

输出是:width = 139,和省略号不会出现。

我缺少的是在这里吗?

html css ellipsis css3
10个回答
97
投票

显然,加入:

td {
  display: block; /* or inline-block */
}

解决问题为好。


另一种可能的解决方案是设置table-layout: fixed;为表,并设置它的width。例如:http://jsfiddle.net/fd3Zx/5/


-1
投票

如果你不想设置最大宽度,以TD(如在this answer),你可以设置最大宽度以DIV:

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

注意:100%是不行的,但99%的伎俩在FF。其他现代浏览器不需要傻DIV黑客。

td {
  border: 1px solid black;
    padding-left:5px;
    padding-right:5px;
}
td>div{
    max-width: 99%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

82
投票

同样重要的是把

table-layout:fixed;

到含有表,所以它在IE9运行良好(如果利用最大宽度)为好。


74
投票

正如前面所说的,你可以使用td { display: block; }但这违背了使用一个表的目的。

您可以使用table { table-layout: fixed; }但也许你希望它不同的表现某些列。

所以最好的方式来实现你想要将你包裹中的文本<div>和你的CSS应用到<div>(不给<td>)这样的内容:

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

36
投票

尝试使用max-width代替width,该表仍然会自动计算宽度。

工作,即使在ie11(与IE8兼容模式)。

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle


16
投票

Demo page

对于动态宽度表,我发现下面的方法来产生令人满意的结果。每个被希望有修整文本的能力应该有它包装的<th>的内容让<th>工作的内部包装元素text-overflow

那么,真正的关键是要设置max-width(在<th>)在vw单位。

这将有效地使元素的宽度是“绑定”到视口宽度(浏览器窗口),将导致敏感内容剪辑。设置vw单位需要一个令人满意的值。

Minimal CSS:

th{ max-width:10vw; }

th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

Here's a runnable demo:

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>

3
投票

只是提供了一个选择,因为我有这个问题,这里没有其他的答案有我想要的理想效果。所以不是我用一个列表。现在语义我输出的信息可能已被视为两个表格的数据,而且列出的数据。

那么,到底什么,我所做的是:

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

所以基本上ultablelitrspantd

然后在CSS我设定的span元素是display:block;float:left;(我更喜欢组合inline-block,因为它会在旧版本的IE浏览器的工作,以清除浮动的效果看:http://css-tricks.com/snippets/css/clear-fix/),并也有省略号:

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

然后,所有你要做的就是设置你的跨度的max-widths并且会给列表中的一个表的外观。


1
投票

除了使用省略号来解决溢出文本的问题,我发现,残疾人和风格的输入更好看,仍然允许用户查看和选择整个字符串,如果他们需要。

<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />

它看起来像一个文本字段,但亮点,能够使用户更友好


1
投票

检查box-sizingtd元素的CSS属性。我曾与其中将其设置为border-box值的CSS模板的问题。您需要设置box-sizing: content-box


0
投票

留下你的表,因为它们。只是包装内的TD的内容与应用了截断CSS的跨度。

/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

推荐问答