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>
私は非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> </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 Samfound 最良の解決策のようです。
しかし、スペーサー要素でコンテンツを複製する必要があることに気付きました。それほど悪くはないと思いますが、クリップされたテキストにtitleポップアップも適用したいと思います。そして、それは長いコードが私のコードで三度目に現れることを意味します。
ここでは、:after疑似要素からtitle属性にアクセスして、スペーサーを生成し、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;
}
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);
}
});
});
はるかに簡単でエレガントなソリューションがあります。
切り捨てを適用するtable-cell内に、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;
}
動作するFiddle https://jsfiddle.net/d0xhz8tb/
問題は、等間隔の固定幅の列を作成する「table-layout：fixed」です。しかし、このcss-propertyを無効にすると、テーブルが可能な限り大きくなるため（そして、オーバーフローすることに注意するよりも）テキストのオーバーフローがなくなります。
申し訳ありませんが、この場合、フレッドはケーキを持って食べることができません..大家がセルディトに最初に作業するスペースを与えない限り、フレッドは彼を使用できません。
次のように、特定の列を「重み付け」しようとすることができます。
<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>
あなたはアイデアを得る。
いくつかの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/
Samplebiasの回答のように、Javascriptが受け入れ可能な回答である場合、この目的のためにjQueryプラグインを作成しました。 https://github.com/marcogrcr/jquery-tableoverflow
プラグインを使用するには、単に入力します
$('selector').tableoverflow();
完全な例：http://jsfiddle.net/Cw7TD/3/embedded/result/
編集：
- IE互換性のためにjsfiddleで修正。
- ブラウザの互換性を改善するためにjsfiddleで修正しました（Chrome、Firefox、IE8 +）。
うん、私はthirtydotがそれを持っていると言うでしょう、jsメソッドを使用しない限り、それを行う方法はありません。定義しなければならないレンダリング条件の複雑なセットについて話している。例えば両方のセルがアパートメントに対して大きくなりすぎるとどうなりますか。優先順位を決定するか、単にエリアの割合を指定する必要があります。それらがいっぱいになると、両方がそのエリアを占有します。他のセルで足を伸ばします。いずれにしても、CSSでそれを行う方法はありません。私が考えていないCSSで人々が行うかなりファンキーなことはいくつかありますが。あなたがこれを行うことができることは本当に疑います。
この質問はGoogleで一番上に表示されるため、私の場合は https://css-tricks.com/snippets/css/truncate-string-with-Ellipsis/ のCSSスニペットを使用しましたが、それはtdに望ましい結果を与えませんでした。
Tdのテキストの周りにdivタグを追加する必要があり、Ellipsisはようやく機能しました。
短縮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; }
右のセルの幅を必要な最小幅に設定してから、左のセルの内側にoverflow-hidden + text-overflowを適用できますが、Firefoxにはバグがあります...
ただし、flexboxが役立つようです
「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>
これが誰かに役立つかどうかはわかりませんが、各列に特定の幅サイズをパーセンテージで指定することで同様の問題を解決しました。明らかに、これは、各列のコンテンツの幅があまり大きく変わらない場合に最適です。
私は最近それに取り組んでいます。これを確認してください jsFiddle test 、ベーステーブルの幅を変更して動作を確認してみてください）。
解決策は、テーブルを別のテーブルに埋め込むことです。
<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> </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の拡張に満足していますか？