CSS省略記号が表のセルで機能しないのはなぜですか?


150

次の例を検討してください:(ライブデモはこちら

$(function() {
  console.log("width = " + $("td").width());
});
td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

出力は次のとおりwidth = 139です。省略記号は表示されません。

ここで何が欠けていますか?



どういうわけか重複しますが、答えは回避策を提供しません(Arlen Cussのように)。
Florian Margaine、2012

1
widthそしてheightテーブルの上に細胞がいつものように使用され、最小限の幅と高さ。表のセルが違います!
リスター氏2012

1
@FlorianMargaine実際には、他の質問は回避策を提供します:目的の幅でセルにdivを配置します。
リスター氏2012

ただし、このページに記載されている回答を優先します。
Florian Margaine、2012

回答:


102

どうやら、追加:

td {
  display: block; /* or inline-block */
}

問題も解決します。


別の可能な解決策はtable-layout: fixed;、テーブルに設定し、それをに設定することwidthです。例:http : //jsfiddle.net/fd3Zx/5/


4
丁度。要素display: table-celltd要素のデフォルト)は幅を受け入れません。
Michael Mior

29
display: block;テーブルを使用する目的に反するものです。私はtable-layout: fixed;オプションが好きです、それは私のためにうまくいきました。
Alex K

7
table-layout:fixed列の幅をあまりスマートでない方法で分散します。同じ方法で列幅を割り当てtable-layout: normalながら、省略記号を正しく表示する別のオプションはありますか?
ネスト

これはテーブルの縁にネジで留めます。max-widthを使用することはできません。
チャーリー

84

置くことも重要です

table-layout:fixed;

包含テーブル上にあるため、IE9(max-widthを利用している場合)でも適切に動作します。


7
これにより、レスポンシブレイアウトでもテキストオーバーフローが機能するようになります
jao

3
これはまさに私が必要としたものです。テーブルの幅は100%です。固定幅の列を除くすべての列。これにより、最後の列が残りと同じだけのスペースを取ることができます。
matthew_360 2014年

78

前述のように、使用できますtd { display: block; }が、これはテーブルを使用する目的に反します。

使用できますtable { table-layout: fixed; }が、一部の列では動作が異なるようにする必要があります。

したがって、あなたが望むものを達成する最良の方法は、テキストをaでラップし、次の<div>ようにCSSを<div>(ではなく<td>)に適用することです。

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2
これは私が見た中で最も簡単な方法で、実際にはIE8で機能します。
Keith Ketterer、2015年

2
これが、表の省略記号で実際に見た中で最高のソリューションです。
メンバーズサウンド2016

41

max-width代わりにを使用してみてくださいwidth。テーブルは幅を自動的に計算します。

ie11(ie8互換モード)でも機能します。

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle


1
よく見つかりました。要素を固定幅にするため、両方を使用するのがおそらく最善です。そうでない場合、コンテンツで許可されている場合は短くなる可能性があります。
LSerni 2015

ディスプレイハックよりもはるかに優れています。表枠付きのディスプレイハックねじ。
チャーリー

21

デモページ

動的な幅を持つテーブルの場合、満足のいく結果を生成するために以下の方法を見つけました。各<th>トリミングされたテキストの能力を持つことを望んされているが内容包む内側の折り返しの要素が必要です<th>許可text-overflow仕事にします。

本当のトリックは、max-width(上で<th>vw単位で設定することです。

これにより、要素の幅がビューポートの幅(ブラウザウィンドウ)に「バインド」され、レスポンシブコンテンツのクリッピングが発生します。vw単位を必要な満足のいく値に設定します。

最小限のCSS:

th{ max-width:10vw; }
      
th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

これは実行可能なデモです:

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>


3

私がこの問題を抱えていて、ここでの他の答えのどれも私が望んでいた望ましい効果をもたらさなかったので、代替案を提供するだけです。そのため、代わりにリストを使用しました。意味論的に、私が出力していた情報は、表形式のデータとリストされたデータの両方と見なすことができました。

結局私がしたことは:

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

そこで、基本的ulであるtableliあるtr、とspanありますtd

次にCSSでspan要素を次のように設定しますdisplay:block;してfloat:left;(私はにその組み合わせを好むinline-block、それは見フロート効果をクリアするには、IEの古いバージョンでは動作しますよう:http://css-tricks.com/snippets/css/clear- fix /)と楕円を含めるには:

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

次に、設定するのは max-widths、スパンをで、リストにテーブルの外観が表示されます。


td内でulを適用できます<td><ul>...</ul></td>か(例:)?それは私にはうまくいかないようです:(
Sam

2

テキストのオーバーフローの問題を解決するために省略記号を使用する代わりに、無効でスタイル設定された入力の方が見栄えがよく、必要に応じてユーザーが文字列全体を表示および選択できることがわかりました。

<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />

テキストフィールドのように見えますが、ハイライト表示できるため、よりユーザーフレンドリーです。


2
支援技術を使用すると、入力として誤って読み取られ、ユーザーが何かを入力できると考えるため、ユーザーフレンドリーではありません。要素のセマンティクスを誤用してもまったく問題ありません。
Carlo

OMG、これはとても賢いです!これはテーブルの一部なので、入力をボーダーレスで背景を透明に設定するだけです。このソリューションが大好きです。
サム

1

要素のbox-sizingcssプロパティを確認してくださいtdborder-box値に設定するcssテンプレートに問題がありました。セットが必要ですbox-sizing: content-box


0

テーブルはそのままにしておきます。切り捨てCSSが適用されたスパンでTD内のコンテンツをラップするだけです。

/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

私はこれを試しましたが、DataTables.netでは機能しません。何か案が?
サム

-2

max-widthをtdに設定したくない場合(この回答のように)、max-widthをdivに設定できます:

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

注:100%は機能しませんが、FFでは99%が機能します。他の最新のブラウザは、ばかげたdivハックを必要としません。

td {
  ボーダー:1px黒一色;
    padding-left:5px;
    padding-right:5px;
}
td> div {
    最大幅:99%;
    オーバーフロー:非表示。
    テキストオーバーフロー:省略;
    空白:nowrap;

}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.