CSSトリムテーブルの内容

Question

CSSを使用して表のセルから長いコンテンツをトリムする方法を探しています。例えば。指定されたセルに内容が長すぎるとします。テーブルの幅は、この本当に長いコンテンツに合わせて調整されています。しかし、テーブルはすでに100％の幅を消費しているため、テーブルの多くがこのコンテンツに合わせてウィンドウの外側に飛び出します。

私の質問は、セルの幅までの表のセルにテキストを表示するためにCSS（好ましくは< CSS3）を使用して、オーバーフローを隠すことができる方法があるかどうかです。テーブルの幅？

Answer 1

これはFirefox以外のすべてのブラウザでサポートされています（私は思う）。 Elipsisは切り詰められたテキストを作成し、クリップのクリップだけをクリップします...

td { text-overflow：省略記号; /*またはtext-overflow：clip; */ }

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

（この場合は、時/資産/ XML /）サーバーにこのファイル（ellipsis.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">....