web-dev-qa-db-ja.com

CSS省略記号がテーブルセルで機能しないのはなぜですか？

次の例を考えてください：（ live demo here ）

HTML：

<table>
  <tbody>
    <tr><td>Hello Stack Overflow</td></tr>
  </tbody>
</table>

CSS：

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

JS：

$(function() {
  console.log("width = " + $("td").width());
});

出力はwidth = 139であり、省略記号は表示されません。

ここに何が欠けていますか？

htmlcssellipsiscss3
134
Misha Moroshko

どうやら、追加：

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

問題も解決します。

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

95
Misha Moroshko

置くことも重要です

table-layout:fixed;

含まれるテーブル上で、IE9（max-widthを利用する場合）でも同様に動作します。

77
streetlight

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

table { table-layout: fixed; }を使用できますが、列によっては動作を変えたい場合があります。

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

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

widthの代わりにmax-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 。

34
Ashe

デモページ

動的な幅を持つテーブルの場合、満足のいく結果を得るための以下の方法を見つけました。テキストのトリミング機能が必要な各<th>には、<th>の内容をラップする内部ラッピング要素が必要です text-overflow が機能します。

そして、本当のトリックは、 vw 単位でmax-width（<th>に）を設定することです。

これにより、要素の幅がビューポートの幅（ブラウザウィンドウ）に「バインド」され、応答性の高いコンテンツクリッピングが発生します。 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>
15
vsync

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

結局私がやったことは：

<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はtable、liはtr、spanはtdです。

次に、CSSでspan要素をdisplay:block;およびfloat:left;に設定します（IEの古いバージョンで機能するため、inline-blockとの組み合わせをお勧めします。フロート効果をクリアするには、 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をセットするだけで、それはリストにテーブルの外観を与えます。

3
diggersworld

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

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

テキストフィールドのように見えますが、強調表示可能であるため、ユーザーフレンドリです

1
craigsnyders

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

1
David Slavík

Max-widthをtdに設定したくない場合（ this answer など）、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 {
 border：1px solid black; 
 padding-left：5px; 
 padding-right：5px; 
} 
 td> div {
 max-width：99％; 
 overflow：hidden; 
 text-overflow：Ellipsis; 
 white-space：nowrap; 
 
}
0
Timo Kähkönen

テーブルはそのままにしておきます。切り捨て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>
0
Jeff Sieffert