为什么CSS省略号在表格单元格中工作？ [英] Why doesn't CSS ellipsis work in table cell?

问题描述

请考虑以下示例：（此处的演示）

HTML：

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

CSS：

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

JS：

  $（function（）{
 console.log（width =+ $（td）。width（））; 
}）; 
  

输出为： width = 139

解决方案

显然，添加：

  td {
 display：block; / *或inline-block * / 
} 
  

p>

---

另一个可能的解决方案是设置 table-layout：fixed; 该表，并且还设置它的 width 。例如： http://jsfiddle.net/fd3Zx/5/

Consider the following example: (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());
});

The output is: width = 139, and the ellipsis doesn't appear.

What am I missing here?

解决方案

Apparently, adding:

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

solves the problem as well.

---

Another possible solution is to set table-layout: fixed; for the table, and also set it's width. For example: http://jsfiddle.net/fd3Zx/5/

这篇关于为什么CSS省略号在表格单元格中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！