de-vraag
  • 質問
  • タグ
  • ユーザー
通知:
報酬:
登録
登録すると、質問に対する返答やコメントが通知されます。
ログイン
すでにアカウントをお持ちの方は、ログインして新しい通知を確認してください。
追加された質問、回答、コメントには報酬があります。
さらに
ソース
編集
Ann L.
Ann L.
質問

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

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


  
    Very long title 
  
  
    { bunch of hyperlinks with background images, emulating a toolbar }
  

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

このテーブルは、ページが狭くなるとそれ自体が狭くなると考えられ、それはかなりうまくいきます。しかし、実際のタイトルテキスト(変化する可能性がある)が長すぎる場合は、テーブルがどれくらい狭くなっているかの限界となり、ページ上の他のものと重複する可能性があります。 (私は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 2011-10-27T21:56:05+00:00 2
Ann L.
Ann L.
編集された質問 21日 5月 2017 в 3:00
プログラミング
html
css
overflow
Alexey Ivanov
27日 10月 2011 в 10:28
2011-10-27T22:28:43+00:00
さらに
ソース
編集
#56793419

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

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
0
Sam
27日 10月 2011 в 10:32
2011-10-27T22:32:22+00:00
さらに
ソース
編集
#56793420

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

Next change your to a

a style like this:

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

0
0
質問の追加
カテゴリ
すべて
技術情報
文化・レクリエーション
生活・芸術
科学
プロフェッショナル
事業内容
ユーザー
すべて
新しい
人気
1
Roxana Elizabeth CASTILLO Avalos
登録済み 1週間前
2
Hideo Nakagawa
登録済み 1週間前
3
Sergiy Tytarenko
登録済み 1週間前
4
shoxrux azadov
登録済み 1週間前
5
Koreets Koreytsev
登録済み 2週間前
© de-vraag :年
ソース
stackoverflow.com
ライセンス cc by-sa 3.0 帰属