Question

请考虑以下示例：（live demo here）

HTML：

<table>
  <tbody>
    <tr><td>Hello Stack Overflow</td></tr>
  </tbody>
</table>

CSS：

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

JS：

$(function() {
  console.log("width = " + $("td").width());
});

输出为：width = 139，省略号不会出现。

我在这里缺少什么？

Answer 1

显然，添加：

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

也解决了这个问题。

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

Answer 2

放

也很重要

table-layout:fixed;

在包含的表上，所以它在IE9中运行良好（如果你的利用最大宽度）。

Answer 3

如前所述，您可以使用td { display: block; }，但这会破坏使用表格的目的。

您可以使用table { table-layout: fixed; }，但也许您希望某些列的行为不同。

因此，实现所需内容的最佳方式是将文本包装在<div>中并将CSS应用于<div>（而不是<td>），如下所示：< / p>

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

Answer 4

尝试使用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

Answer 5

Demo page

对于具有动态宽度的表格，我找到了以下方法来产生令人满意的结果。希望具有修剪文本能力的每个<th>都应该有一个内包裹元素，它包含<th>允许text-overflow的内容。

然后，真正的诀窍是以vw单位设置max-width（在<th>上）。

这将有效地导致元素的宽度被绑定＆＃34;到视口宽度（浏览器窗口）并将导致响应内容剪辑。将vw单位设置为所需的令人满意的值。

最小CSS：

th{ max-width:10vw; }

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

这是一个可运行的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

只是提供一个替代方案，因为我有这个问题，这里没有其他答案都有我想要的预期效果。所以我使用了一个列表。现在从语义上讲，我输出的信息既可以被视为表格数据，也可以被视为列出的数据。

所以我最终做的是：

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

所以基本上ul是table，li是tr，span是td。

然后在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，这样就会给列表一个表格的外观。

Answer 7

我没有使用省略号来解决文本溢出的问题，而是发现禁用和样式化的输入看起来更好，并且仍然允许用户在需要时查看和选择整个字符串。

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

它看起来像一个文本字段，但是可以突出显示，因此更加用户友好

Answer 8

检查box-sizing元素的td css属性。我遇到了css模板的问题，它将其设置为border-box值。您需要设置box-sizing: content-box。

Answer 9

保持表格不变。只需将内容包装在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>

Answer 10

我已经尝试了许多上述解决方案，但没有一个感到灵活或令人满意。

这种最大宽度为1px的小技巧可以直接应用于td元素

.truncated-cell {
   max-width: 1px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

Answer 11

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

上述设置对我有用，没有改变表格宽度。我在里面添加了一个 div 并在其中添加了类省略号。

Answer 12

如果您不想将max-width设置为td（如this answer中所示），则可以将max-width设置为div：

function so_hack(){}

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

function so_hack(){}

注意：100％不起作用，但99％在FF中起作用。其他现代浏览器不需要愚蠢的div hacks。

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

}

为什么CSS省略号不能在表格单元格中工作？

12 个答案:

Demo page

最小CSS：

这是一个可运行的演示：