テーブルセルのCSSテキストオーバーフロー？

CSSを使いたい text-overflowテーブルセルで、テキストが長すぎて1行に収まらない場合は、複数行に折り返されるのではなく省略記号が表示されます。これは可能ですか？

私はこれを試しました：

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

しかし、white-space: nowrapはテキスト（およびそのセル）を継続的に右に拡張し、テーブルの幅全体をコンテナの幅を超えて押し上げているように見えます。ただし、これがないと、テキストがセルの端に達したときに複数行に折り返され続けます。

テーブルセルをオーバーフローしたときに省略記号でテキストをクリップするには、オーバーフローを機能させるために、max-width各tdクラスにCSSプロパティを設定する必要があります。追加のレイアウトdivは必要ありません

td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

レスポンシブレイアウトの場合。max-widthCSSプロパティを使用して列の有効な最小幅を指定するか、max-width: 0;無制限の柔軟性のために使用します。また、包含テーブルには通常width: 100%;、特定の幅が必要であり、列には通常、全幅のパーセンテージとして設定された幅があります

table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
td.columnA {
    width: 30%;
}
td.columnB {
    width: 70%;
}

歴史的：IE 9（またはそれ以下）の場合、これをHTMLに入れて、IE固有のレンダリングの問題を修正する必要があります。

<!--[if IE]>
<style>
    table {
        table-layout: fixed;
        width: 100px;
    }
</style>
<![endif]-->

max-widthまたは固定幅の指定はすべての状況で機能するわけではなく、テーブルは流動的でセルの自動間隔を設定する必要があります。それがテーブルの目的です。

これを使用してください：http : //jsfiddle.net/maruxa1j/

HTML：

<td class="ellipsis">
    <span>This Text Overflows and is too large for its cell.</span>
</td>

CSS：

.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

IE9およびその他のブラウザで動作します。

なぜこれが起こるのですか？

そうですw3.orgに、このセクションでは、ことを示唆しているテキスト・オーバーフローがブロック要素にのみ適用されます：

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

MDNは、同じことを言います。

このjsfiddleにはコードが含まれており（デバッグの変更がいくつかあります）、これをのdiv代わりにに適用すると問題なく機能しtdます。またtd、包含divブロックでのコンテンツをラップすることで、すぐに思いつく唯一の回避策もあります。しかし、それは私にとって「醜い」マークアップのように見えるので、他の誰かがより良い解決策を持っていることを望んでいます。これをテストするコードは次のようになります。

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}

Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>

Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

固定幅を何にも設定したくない場合

以下の解決策では、テーブルセルのコンテンツを長くすることができますが、親テーブルの幅や親行の高さに影響を与えることはできません。たとえばwidth:100%、それでも他のすべてのセルに自動サイズ機能を適用するテーブルが必要な場合。「メモ」または「コメント」列などがあるデータグリッドで役立ちます。

CSSに次の3つのルールを追加します。

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

動的テキストのオーバーフローが必要なテーブルセルでHTMLを次のようにフォーマットします。

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

さらに希望を適用 min-width、テーブルセルに（またはまったくしない）を。

もちろんフィドル：https : //jsfiddle.net/9wycg99v/23/

要素に指定するtable-layout: fixed;と、tableスタイルtdが有効になるようです。ただし、これはセルのサイズ設定にも影響します。

Sitepointは、ここでテーブルレイアウトメソッドについて少し説明しています：http ://reference.sitepoint.com/css/tableformatting

テーブルを自動レイアウトするだけの場合

max-width、または列幅のパーセンテージtable-layout: fixedなどを使用しない場合

https://jsfiddle.net/tturadqq/

使い方：

ステップ1：テーブルの自動レイアウトに任せるだけです。

大量のテキストを含む1つ以上の列がある場合、他の列をできるだけ縮小してから、長い列のテキストを折り返します。

ステップ2：セルの内容をdivでラップし、そのdivを max-height: 1.1em

（追加の0.1emは、「g」と「y」の尾のように、テキストベースの下に少しレンダリングする文字用です）

ステップ3：titledivに設定する

これはアクセシビリティに優れており、すぐに使用する小さなトリックに必要です。

ステップ4：::afterdivにCSS を追加する

これはトリッキーなビットです。でCSSを設定::afterしcontent: attr(title)、それをdivの上に配置して設定しtext-overflow: ellipsisます。わかりやすくするために、ここでは赤色にしています。

（長い列の末尾に省略記号があることに注意してください）

ステップ5：divテキストの色を transparent

これで完了です。

パーセント表の幅の場合、または表のセルに固定幅を設定できない場合。あなたはtable-layout: fixed;それを動作させるために申請することができます。

table {
  table-layout: fixed;
  width: 100%;
}
td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red;
}

<table>
  <tr>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
  </tr>
</table>

セルの内容をflexブロックでラップします。おまけとして、セルの自動表示幅に合わせます。

table {
  width: 100%;
}

div.parent {
  display: flex;
}

div.child {
  flex: 1;
  width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>
      <div class="parent">
        <div class="child">
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
      <div>
    </td>
  </tr>
</table>

セル内に絶対配置されたdivを使用してこれを解決しました（相対）。

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

それでおしまい。次に、divにtop：値を追加するか、垂直に中央揃えします。

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

右側にスペースを確保するために、最大幅を少し減らすことができます。

これは私の場合、FirefoxとChromeの両方で機能しました：

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

これはIE 9で動作するバージョンです。

http://jsfiddle.net/s27gf2n8/

<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>