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