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

考虑下面的例子: (现场演示)

$(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，省略号不会出现。

我错过了什么？

143202 次浏览
小开

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

小开
最佳答案

显然，他补充道:

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

也解决了这个问题。

另一种可能的解决方案是为表设置 table-layout: fixed;，同时也设置它为 width

小开

同样重要的是

table-layout:fixed;

放在包含表上，因此它在 IE9中运行良好(如果您使用最大宽度)。

小开

如前所述，您可以使用 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;
}
小开

只是提供了一个选择，因为我有这个问题，没有其他的答案在这里有我想要的效果。所以我用了一个名单。从语义上讲，我输出的信息可以看作是表格数据，也可以看作是列表数据。

所以最后我做的是:

<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，这将使列表看起来像一个表。

小开

如果不想将 max-width 设置为 td (像在 这个答案中那样) ，可以将 max-width 设置为 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;


}
小开

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

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

它看起来像一个文本字段，但是可以高亮显示，所以用户界面更友好

小开

演示页面

对于具有动态宽度的表，我发现以下方法可以产生令人满意的结果。每个 <th>，是希望有裁剪文本的能力，应该有一个内部包装元素，其中包装的内容的 <th>允许 text-overflow的工作。

真正的诀窍是在 < a href = “ https://developer.mozilla.org/en/docs/Web/CSS/length”rel = “ noReferrer”> vw unit中设置 max-width(在 <th>上)。

这将有效地导致元素的宽度“绑定”到视窗宽度(浏览器窗口) ，并导致响应性内容剪辑。将 vw单位设置为所需的满意值。

最小化 CSS:

th{ max-width:10vw; }
      

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

示范(附可编辑文字) :

document.designMode="on"
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>

小开

检查 td元素的 box-sizing css 属性。我有问题的 css 模板设置为 border-box值。你需要设置 box-sizing: content-box。

小开

让你们的桌子保持原样。只需用一个应用了截断 CSS 的 span 来包装 TD 中的内容即可。

/* 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>
小开

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

这个带有 max-width: 1px 的小插件可以直接应用于 td 元素

.truncated-cell {
max-width: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
小开 
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

上面的设置对我很有用，没有改变桌子的宽度。我在其中添加了一个 div，并向其中添加了类省略号。


提交答案