4

幅が200pxのテーブルがあります。

2 つの列があります。

  1. タイトル (簡単なテキスト、リンクなど)
  2. ロゴ（画像）

問題は: タイトル + ロゴが 200px を超える場合、タイトルのみを制限する必要があります。

------------------------
|Title      |Logo      |
------------------------
|Helloooo...|img       |
------------------------

HTML と CSS のみを制約する

私はさまざまな考えを試します：

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;
table-layout:fixed;
...

私が得ている唯一の結果は次のとおりです。

------------------------
|Title      |Logo      |
------------------------
|Helloooooooooooo|img       | -> more than 200px
------------------------
4

4 に答える 4

2

CSS を使用して、word-wrap非常に大きな単語を分割できます。

この実用的なフィドルの例を参照してください!

.title {
    width: 100px;            /* adjust the value to fit your needs */
    word-wrap: break-word;
    display: inline-block;
}

ノート：

  • word-wrap にはブロック レベルの要素が必要なので、少なくともTDwithを設定する必要がありますdisplay:inline-block。
  • 彼女がラッパーをオーバーフローしているときに単語が壊れるので、word-wrapに固定幅を与える必要がありますTD。

MDN でブラウザ互換性テーブルを確認できます。

于 2012-06-08T18:33:33.700 に答える
0

これは HTML と CSS では不可能だと思います。クライアント側で実行したい場合は、JavaScript を使用して、タイトル セルの幅を取得し、それに応じてテキストをトリミングします。これには、Substring 関数を使用できます。ただし、jQuery などの JavaScript ライブラリを使用することもできます

于 2012-06-08T18:34:18.460 に答える