CSS修剪表格内容

Question

我正在寻找一种使用CSS修剪表格单元格中的长内容的方法。例如。说一个给定的单元格包含的内容太长了。表格的宽度经过调整以适应这个非常长的内容。但是，由于表格已经消耗了100％的宽度，很多表格溢出窗口的一侧以适应这些内容。

所以，我的问题是，有没有办法可以使用CSS（最好是< CSS3更好的IE兼容性）在表格单元格中显示文本直到单元格的宽度，然后隐藏任何溢出，桌子的宽度？

Answer 1

除了firefox（我认为），这在所有浏览器中都受支持。省略号产生......在被截断的文本和片断只是剪辑文本...

TD { 文本溢出：省略号; /*或文本溢出：剪辑; */ }

Answer 2

这是一个跨浏览器的解决方案。

添加到您的CSS：

/** Custom CSS logic to truncate text with ellipsis **/ 
.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    -moz-binding: url('/assets/xml/ellipsis.xml#ellipsis'); 
} 

这个文件（ellipsis.xml）添加到您的服务器（在这种情况下，/资产/ XML /）：

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
    <binding id="ellipsis"> 
     <content> 
      <xul:window> 
       <xul:description crop="end" xbl:inherits="value=xbl:text"> 
        <children/> 
       </xul:description> 
      </xul:window> 
     </content> 
    </binding> 
</bindings> 

然后加入该类到需要在溢出时截断的任何DOM节点：

<div class="ellipsis">....