2

テキストを完全に切り捨てるためのテーブル設定があります....そのテーブルのテキストをdivにラップするまで。例として、この JSFiddle を参照してください: http://jsfiddle.net/3DKMJ/

これは、セル内のテキストを切り捨てるために機能します。

<table>
  <tr>
    <td>Text</td>
  </tr>
</table>

これは、セル内のテキストを切り捨てるには機能しません。

<table>
  <tr>
    <td><div>Text</div></td>
  </tr>
</table>

これが私のcssです：

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

div に関する問題は、テキストの折り返しが防止され、テキストが非表示になっていることですが、表示するように設定した楕円は div が添付されていると表示されません。

テーブル内に div がある場合にこれを機能させる方法はありますか?

[編集] 前述のように、追加td, td div {することができ、それは機能します。投稿後にこれに気付きました。私の問題はより具体的なようです。私は実際にインライン ブロックとして表示されているスパンを持っています。問題を起こしているのはブロックの部分だと思っていたのですが、インラインブロックとのスパンであるということではないでしょうか。この更新されたフィドルを参照してください: http://jsfiddle.net/P2PZW/2/

4

2 に答える 2

9

display:inline;問題のdiv要素で使用できます。

ここでjsFiddle。

質問の編集への返信:

display:inlineの代わりに使用display:inline-blockしますtd span。

ここでjsFiddle。

コメントへの返信:

本当にそのままにしておく必要がある場合はdisplay:inline-block、次のようにできます。

td span {
   display:inline-block; 
   text-overflow:ellipsis;
   overflow:hidden; 
   width:100%;
}

ここでjsFiddle。

于 2013-05-17T22:10:54.740 に答える
2

試す

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

代わりは

td { width:100px;white-space:nowrap; overflow:hidden; text-overflow: ellipsis; }
于 2013-05-17T22:10:07.313 に答える