CSS：表のセルを切り捨てますが、可能な限り適合させます

フレッドに会います。彼はテーブルです：

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

フレッドのアパートはサイズを変更するという奇妙な習慣を持っているため、他のすべてのユニットを押しのけてウィットフォード夫人のリビングルームを忘却に追いやらないように、コンテンツの一部を非表示にする方法を学びました。

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

これは機能しますが、フレッドは、彼の右のセル（ニックネームはCelldito）が少しスペースをあきらめた場合、左のセルはほとんど切り捨てられないだろうというしつこい感じを持っています。彼の正気を保存できますか？

要約すると、どのようにしてテーブルのセルが均等にオーバーフローし、それらがすべて空白をあきらめた場合にのみですか？

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

JavaScript以外のソリューションがあると思います！遅くなったほうがいいですよね？結局のところ、これはすばらしい質問であり、Googleはそれで終わりです。ページが読み込まれた後に移動するもののわずかなジッターが許容できないとわかったため、私はJavaScriptの修正を受け入れたくありませんでした。

特徴：

• JavaScriptなし
• 固定レイアウトなし
• 重み付けやパーセント幅のトリックはありません
• 任意の数の列で機能します
• 単純なサーバー側の生成とクライアント側の更新（計算は不要）
• クロスブラウザ互換

仕組み：テーブルセル内で、コンテンツの2つのコピーを、相対的に配置されたコンテナ要素内の2つの異なる要素に配置します。スペーサー要素は静的に配置されるため、テーブルセルの幅に影響します。スペーサーセルの内容をラップできるようにすることで、探しているテーブルセルの「最適な」幅を取得できます。これにより、絶対配置要素を使用して、表示コンテンツの幅を相対的に配置された親の幅に制限することもできます。

テスト済みで動作：IE8、IE9、IE10、Chrome、Firefox、Safari、Opera

結果画像：

JSFiddle：http : //jsfiddle.net/zAeA2/

HTML / CSSの例：

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span>&nbsp;</span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}

私は数日前に同じ課題に直面しました。Lucifer Sam が最良の解決策を見つけたようです。

しかし、スペーサー要素でコンテンツを複製する必要があることに気付きました。悪くないと思いますがtitle、クリップしたテキストにもポップアップを適用したいです。そして、それは長いテキストが私のコードで3回目に現れることを意味します。

ここではtitle、:after疑似要素から属性にアクセスしてスペーサーを生成し、HTMLをクリーンに保つことを提案します。

IE8 +、FF、Chrome、Safari、Operaで動作します

<table border="1">
  <tr>
    <td class="ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>

.ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

/* spacer content */
.ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/

JavaScriptが許容できる場合は、出発点として使用できる簡単なルーチンをまとめました。ウィンドウのサイズ変更イベントに反応して、スパンの内側の幅を使用してセルの幅を動的に調整しようとします。

現在、各セルは通常、行幅の50％を取得していると想定しており、オーバーフローを避けるために、右のセルを折りたたんで左のセルを最大幅に維持します。ユースケースによっては、はるかに複雑な幅分散ロジックを実装できます。お役に立てれば：

テストに使用した行のマークアップ：

<tr class="row">
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
</tr>

サイズ変更イベントをフックするjQuery：

$(window).resize(function() {
    $('.row').each(function() {
        var row_width = $(this).width();
        var cols = $(this).find('td');
        var left = cols[0];
        var lcell_width = $(left).width();
        var lspan_width = $(left).find('span').width();
        var right = cols[1];
        var rcell_width = $(right).width();
        var rspan_width = $(right).find('span').width();

        if (lcell_width < lspan_width) {
            $(left).width(row_width - rcell_width);
        } else if (rcell_width > rspan_width) {
            $(left).width(row_width / 2);
        }
    });
});

より簡単でエレガントな解決策があります。

切り捨てを適用するテーブルセル内に、css table-layout：fixedのコンテナーdivを含めるだけです。このコンテナーは、親テーブルセルの幅全体を使用するため、応答性さえも発揮します。

テーブルの要素には必ず切り捨てを適用してください。

IE8以降で動作

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

およびcss：

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

これが動作しているフィドルです https://jsfiddle.net/d0xhz8tb/

問題は、等間隔の固定幅の列を作成する「table-layout：fixed」です。ただし、このcss-propertyを無効にすると、テーブルが可能な限り大きくなるため（そしてオーバーフローすることに注意するよりも）、テキストオーバーフローが強制終了されます。

申し訳ありませんが、この場合、フレッドはケーキを手に入れて食べることができません。家主が最初にCellditoに使用するスペースを与えない限り、フレッドは彼を使用できません。

次のように、特定の列に「重み付け」を試みることができます。

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="80%" />
        <col width="20%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td>Less content here.</td>
    </tr>
</table>

また、幅0％の列を使用したり、いくつかの組み合わせを使用したりするなど、さらに興味深い調整を試すこともできます。 white-space CSSプロパティのます。

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

あなたはアイデアを得ます。

うん、私はthirtydotにそれがあると言うでしょう、あなたがjsメソッドを使わない限りそれをする方法はありません。あなたが定義しなければならないレンダリング条件の複雑なセットについて話している。たとえば、両方のセルがアパートメントに対して大きくなりすぎた場合、どのユーザーに優先権があるかを決定するか、単純にエリアの割合を指定する必要があります。セルが満杯の場合、両方がそのエリアを占有し、一方に空白がある場合のみあなたは他のセルで足を伸ばします、どちらにしてもCSSでそれをする方法はありません。人々がCSSを使って私が考えていないかなりファンキーなことがいくつかありますが。あなたがこれをすることができるのは本当に疑わしいです。

samplebiasの回答と同様に、Javascriptが許容可能な回答である場合、私はこの目的のためにjQueryプラグインを作成しました：https : //github.com/marcogrcr/jquery-tableoverflow

プラグインを使用するには、次のように入力します

$('selector').tableoverflow();

完全な例： http : //jsfiddle.net/Cw7TD/3/embedded/result/

編集：

• IEとの互換性のためにjsfiddleで修正。
• jsfiddleで修正して、ブラウザーの互換性を改善しました（Chrome、Firefox、IE8 +）。

いくつかのCSSハックを使用してください、それはdisplay: table-column;救助に来ることができるようです：

<div class="myTable">
    <div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div>
    <div class="staticCell">Less content</div>
</div>

.myTable {
    display: table;
    width: 100%;
}

.myTable:before {
    display: table-column;
    width: 100%;
    content: '';
}

.flexibleCell {
    display: table-cell;
    max-width:1px;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}

.staticCell {
    white-space: nowrap;
}

JSFiddle： http ://jsfiddle.net/blai/7u59asyp/

次のルールをに追加するだけtdです：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

例：

table {
  width: 100%
}

td {
  white-space: nowrap;
}

.td-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 0;
}

<table border="1">
  <tr>
    <td>content</td>
    <td class="td-truncate">long contenttttttt ttttttttt ttttttttttttttttttttttt tttttttttttttttttttttt ttt tttt ttttt ttttttt tttttttttttt ttttttttttttttttttttttttt</td>
    <td>other content</td>
  </tr>
</table>

PS： カスタム幅を別のtd使用プロパティに設定する場合min-width。

この質問はGoogleで一番上に表示されるため、私の場合は、https： //css-tricks.com/snippets/css/truncate-string-with-ellipsis/のcssスニペットを使用しましたしましたが、tdに適用しても望ましい結果。

私はtdのテキストの周りにdivタグを追加する必要があり、最後に省略記号が機能しました。

省略されたHTMLコード。

<table style="width:100%">
 <tr>
    <td><div class='truncate'>Some Long Text Here</div></td>
 </tr>
</table>

省略されたCSS。

.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

「nowrap」が問題をある程度解決するかどうかを確認します。注：nowrapはHTML5ではサポートされていません

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
<tr>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >This cells has more content  </td>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >Less content here has more content</td>
</tr>

右のセルの幅を必要な最小幅に設定してから、overflow-hidden + text-overflowを左のセルの内側に適用できますが、Firefoxはここでバグがあります...

どうやら、フレックスボックスは助けることができます

私は最近それに取り組んでいます。このjsFiddleテストをチェックしてくださいベーステーブルの幅を変更して動作を確認してみてください）。

解決策は、テーブルを別のテーブルに埋め込むことです。

<table style="width: 200px;border:0;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="width: 100%;">
                <table style="width: 100%;border:0;border-collapse:collapse">
                    <tbody>
                        <tr>
                            <td>
                                <div style="position: relative;overflow:hidden">
                                    <p>&nbsp;</p>
                                    <p style="overflow:hidden;text-overflow: ellipsis;position: absolute; top: 0pt; left: 0pt;width:100%">This cells has more content</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="white-space:nowrap">Less content here</td>
        </tr>
    </tbody>
</table>

フレッドはCellditoの拡大に満足していますか？

これが誰かに役立つかどうかはわかりませんが、各列に特定の幅のサイズをパーセンテージで指定することで同様の問題を解決しました。明らかに、これは、各列にあまり大きく変化しない幅のコンテンツがある場合に最適です。

同じ問題がありましたが、複数行を表示する必要がありました（text-overflow: ellipsis;失敗した場合）。textarea内部a を使用して解決しTD、テーブルセルのように動作するようにスタイルを設定します。

    textarea {
        margin: 0;
        padding: 0;
        width: 100%;
        border: none;
        resize: none;

        /* Remove blinking cursor (text caret) */
        color: transparent;
        display: inline-block;
        text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */
        &:focus {
            outline: none;
        }
    }

'table-layout：fixed'が必須のレイアウト要件であることを考えると、これは等間隔の調整不可能な列を作成しますが、異なる幅のパーセンテージのセルを作成する必要があります。おそらく、セルの 'colspan'を複数に設定しますか？

たとえば、割合の計算を簡単にするために合計幅100を使用し、80％のセルと20％のセルが必要だとすると、次のことを考慮してください。

<TABLE width=100% style="table-layout:fixed;white-space:nowrap;overflow:hidden;">
     <tr>
          <td colspan=100>
               text across entire width of table
          </td>
     <tr>
          <td colspan=80>
               text in lefthand bigger cell
          </td>
          <td colspan=20>
               text in righthand smaller cell
          </td>
</TABLE>

もちろん、80％と20％の列の場合、100％幅のセルcolspanを5、80％を4、20％を1に設定できます。