Very long title  </td> <td> { bunch of hyperlinks with"> Very long title  </td> <td> { bunch of hyperlinks with"> Very long title  </td> <td> { bunch of hyperlinks with" />

HTML:テーブルが狭くなるにつれて、テキストオーバーフローはますます多くのテキストをカットするはずです

私は、ASP.NETコントロールによって生成されたHTMLテーブルを持つWebページを持っています。表の一番上の行はツールバーをエミュレートします。上の行は次のように並べられています:

<tr>
  <td style="white-space:nowrap;">
    Very long title 
  </td>
  <td>
    { bunch of hyperlinks with background images, emulating a toolbar }
  </td>
</tr>

私は、これが表であり、タイトル領域の内容がスパンに入れられていること、そしておそらくラッピングを指定していないインラインスタイルであることに悩まされています。

このテーブルは、ページが狭くなるとそれ自体が狭くなると考えられ、それはかなりうまくいきます。しかし、実際のタイトルテキスト(変化する可能性がある)が長すぎる場合は、テーブルがどれくらい狭くなっているかの限界となり、ページ上の他のものと重複する可能性があります。 (私はIE8を使用しています。)

I tried applying overflow:hidden, text-overflow:ellipsis, and display: inline-block to the span and adding a width value for the table cell, all through a stylesheet. (Display:block on the span doubled the height of the row, which I didn't want, so inline-block was my choice.) The title text appeared truncated, just as I wanted. But the table wouldn't get any narrower.

After messing around changing values and styles through IEDT I concluded that, when figuring out how narrow the table could get, the text was still counted as being its full length. The span was relatively short, only the text that appeared in the span appeared, but for table-cell width purposes, the text was still all there.

私はこの現象はどこにも書かれていませんでしたが、たぶん私は十分ではないかもしれません。 :) text-overflow が私を助けない場合は、スクリプトでタイトルを動的に切り捨てなければならないと思います。私がCSSだけで欲しいことをする方法はありますか?

3

2 答え

表のセルの表示動作は、ブロックの通常の動作とは異なります。より一般的にするには、テーブルのテーブルレイアウトプロパティを最初に「固定」に変更し、テーブル幅を設定する必要があります。

table { table-layout: fixed; width: 100%; }

ほとんどの場合、セルの自動サイジングが無効になります。その後、いつものようにtdの幅とオーバーフローを設定することができます。

td.title { white-space:nowrap;overflow: hidden; width: 200px; }

Here is example: http://jsfiddle.net/vS3qq/1/

6
追加された
ありがとうございました!それは完全にそれを解決!
追加された 著者 Ann L.,

私はこれがあなたが探しているものだと思います。まず、 style = "white-space:nowrap;" を取り除きます。

Next change your to a <div> a style like this:

<div style="height 18px;overflow:hidden;">

the height value will have to be adjusted to your line height, but this should work.

0
追加された
どうもありがとうございました。
追加された 著者 Ann L.,